Bootstrap 4基本布局嵌套容器内container-fluid答案

【问题标题】：Bootstrap 4 basic layout nested container inside container-fluidBootstrap 4基本布局嵌套容器内container-fluid
【发布时间】：2020-12-11 02:26:57
【问题描述】：

我正在使用bootstrap4 构建一个基本布局，到目前为止我已经有了这个......

.container-fluid {
    background: grey;
}

.container {
    background:wheat;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">

    <div class="container p-5">
      
      <div class="row">
                                
          <div class="col-md-12 pb-5">
      
              <h1>My First Bootstrap Page</h1>      
              <p>This part is inside a .container-fluid class.</p> 
              <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>

          </div>

      </div>
      
       <div class="row">
                                
          <div class="col-md-6 pb-5">
      
              <h1>My First Bootstrap Page</h1>      
              <p>This part is inside a .container-fluid class.</p> 
              <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>

          </div>
          
          <div class="col-md-6 pb-5">
      
              <h1>My First Bootstrap Page</h1>      
              <p>This part is inside a .container-fluid class.</p> 
              <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>

          </div>

      </div>

    </div>

</div>

我使用container-fluid 使背景为全宽，但随后将container 嵌套在内部以使其中的内容具有最大宽度。

这是一种有效的做事方式吗？有没有更好的方法来实现这种布局？

【问题讨论】：

您是否有任何理由不将您的background: grey; 应用到html 或body？
也许他希望页面的每个部分都有不同的背景颜色？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

通常您不会嵌套容器。每个部分应该只有一个容器（.container 或 .container-fluid）。

如果您希望背景为全宽但内部具有最大宽度，您可以在容器外部使用<div /> 或<section />。默认情况下，它们的宽度设置为 100%：

<section class="bg-secondary">
    <div class="container">
        ...
    </div>
</section>

演示： https://jsfiddle.net/davidliang2008/0Ljkcmfn/5/

【讨论】：