📌  相关文章
📜  如何在Bootstrap中设置按钮对齐方式？

📅  最后修改于: 2021-05-25 11:21:37             🧑  作者: Mango

引导按钮与HTML文档的任何其他DOM元素没有不同。对齐它们更可能与对齐段落，div和节相同。以下是一些人可能遇到的情况。

    “容器”类中的按钮：
    “容器”类中的按钮可以与“文本对齐”属性对齐。将div中的按钮组包装起来，并使用以下类将它们对齐，
  • .text-left
  • .text-center
  • .text-right

句法： 

class="text-left"|"text-center"|"text-right"

注意：您还可以使用HTML5

标签将按钮对齐到中心。

例子： 



  

    
    
  
    
  
    Aligning Buttons

  

    
GeeksforGeeks

    

        

            
            
        

  
        

            
            
        

  
        

            
            
        

  
        

            
            
        

    

  
    
    

  

输出：

    FlexBox中的按钮：
    排列按钮的另一种方法是使用flex-utilities。 Bootstrap提供的基本flex类是
  • .d-flex .flex-行
  • .d-flex .flex-列

通过选择其中一种，可以实现以下模式。
例子： 



  

    
    
  
    
  
    Aligning Buttons
  
    

  

    
GeeksforGeeks

    

        

            

                
            

            

                
            

            

                
            

        

    

  
    
    

  

输出：

    相对绝对方法：

    这是在线上最常用的方法。在这种情况下，父div的位置为“相对”，而子div的位置为“绝对”。
    “绝对” div中的元素可以按照您想要的任何方式对齐。考虑以下示例。它显示了DOM元素的所有可能的对齐方式，在这种情况下，按钮可以具有。

    例子： 

    

  

    
  
    
  
    Aligning Buttons
  
    

  

    
    GeeksforGeeks
    
    
    
        
    
            
    
                
            
    
            
    
                
            
    
            
    
                
            
    
  
            
    
                
            
    
            
    
                
            
    
            
    
                
            
    
  
            
    
                
            
    
            
    
                
            
    
            
    
                
            
    
        
    
    
    
  
    
    

  
                    

    输出：