html - Bootstrap : v3. 3.7 需要帮助来理解全宽背景颜色问题

Question

首先你好。

我在较大的设备上使用带有全宽标题背景颜色的 Bootstrap 没有问题，container-fluid 为我解决了这个问题但是我想要实现的是在调整到较小的屏幕尺寸(即 <768)时全宽背景不再是全宽，视口(viewport)边缘将有左右边距/间距。

例如:

<div class="container-fluid">
  <div class="row">
     <div class="col-md-12 col-xs-12">
     </div>
  </div>
</div>

在所有屏幕尺寸上提供全宽标题。

但是:

<div class="container">
   <div class="row">
      <div class="col-md-12 col-xs-12">
      </div>
    </div>
</div>

在较大的视口(viewport)上提供一个居中的标题，两侧都有边距(这只是我想要的小屏幕)，但是当我向下调整视口(viewport)大小时，标题变为视口(viewport)的全宽。

解决此问题的正确方法是什么？..我可以将一个容器放在另一个容器中，然后使用 css 和媒体查询更改主容器的背景颜色(即:白色)，以便我的内部容器(背景色黑色)然后将被左右边距/装订线。也许这是过度设计这个问题，或者甚至不是语义的，有人可以给我更多的见解，

非常感谢

Answer 1

像容器一样包装一个div

<div class="header">
<div class="container-fluid">
  <div class="row">
     <div class="col-md-12 col-xs-12">
     </div>
  </div>
</div>
</div>

然后在 header 类上应用样式