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

Question

首先你好。

我在较大的设备上使用全宽 header 背景颜色的 Bootstrap 没问题，container-fluid 为我解决了这个问题，但是我想要实现的是调整大小缩小到更小的屏幕尺寸（即 <768），full-width 背景不再是全宽，并且在视口边缘有左右 margin/gutter。

例如：

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

在所有屏幕尺寸上给出全宽 header。

但是：

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

在较大的视口上提供一个居中的 header 并在两侧留有边距（这只是我想要的小屏幕）但是当我向下调整视口大小时，header 变成了视口的全宽.

解决这个问题的正确方法是什么？..我可以将一个容器放在另一个容器中，然后使用 css 和媒体查询更改主容器的背景颜色（即：白色）这样我的inner-container（background-color黑色）就会左右margined/gutter。也许这是过度设计这个问题，或者甚至不是语义的，有人可以给我更多的见解，

非常感谢

Answer 1

包装一个 div 你的 container 喜欢

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

然后在 header class

上应用样式