📌  相关文章
📜  如何在Bootstrap中将标头与包装器对齐？

📅  最后修改于: 2021-05-25 10:58:39             🧑  作者: Mango

HTML包装器允许您在网页内居中放置页眉，内容和页脚。标头可能非常花哨。以创造性的方式使用CSS或引导程序可以为您的活动网站页面提供侧边栏或两栏外观。

句法： 


    content...

例子：

HTML


  

    
        How to align header with 
        wrapper in Bootstrap?
    
  
    

  

    

        

            GeeksforGeeks
        

        Piece of text inside a 500px 
        width div centered on the page
    


  

HTML


  

    
        Bootstrap 4 Align Header
        with Wrapper
    
  


  

    

        
    

  
    

        

            GeeksforGeeks
        

    


  

HTML


  

  
  
  
  
  
  
  
  
  
    
  
    
  
    
  
    Bootstrap 4 Align Header 
    with Wrapper
  
  
  

  

  

    
  

  
  

    

      GeeksforGeeks
    

  


  

HTML


  

  
  
  
  
  
  
  
  
  
  
    
  
    
  
    
  
    Bootstrap 4 Align header 
    with wrapper
  
  
  

  

  

    
  

  

    


      GeeksforGeeks
    

  


  

输出：

工作原理：创建包装器并为其分配一定的宽度。通过使用margin：auto或margin-left：auto或margin-right：auto属性对其应用自动水平边距。确保您的内容将居中。

下文讨论了将标头与包装器对齐的三种方法：

方法1：将标头与CSS中的包装器对齐。

的HTML 



  

    
        Bootstrap 4 Align Header
        with Wrapper
    
  


  

    

        
    

  
    

        

            GeeksforGeeks
        

    


  

输出：

方法2：在Bootstrap 4中将标头与包装器对齐

的HTML 



  

  
  
  
  
  
  
  
  
  
    
  
    
  
    
  
    Bootstrap 4 Align Header 
    with Wrapper
  
  
  

  

  

    
  

  
  

    

      GeeksforGeeks
    

  


  

输出：

注意： “包装器”封装了页面上的所有其他可视组件。最简单的方法是使用一个“包装器” div部件，该部件的宽度以及左右自动边缘。负边缘也可以用于水平和垂直居中。但是它有其自身的缺点，例如，如果将窗口浏览器调整大小，将无法再看到内容。

方法3：在Bootstrap 4中将标头与flexbox对齐。在以下示例中，导航栏中的CSS“ Flexbox”用于使内容居中。

的HTML 



  

  
  
  
  
  
  
  
  
  
  
    
  
    
  
    
  
    Bootstrap 4 Align header 
    with wrapper
  
  
  

  

  

    
  

  

    


      GeeksforGeeks
    

  


  

输出：

包装器和容器之间的区别：在编程语言中，容器一词用于包含多个部分的结构。包装器是包裹单个对象以提供更好的灵活接口的东西。