Bootstrap:v3.3.7需要帮助才能了解全宽背景颜色问题

时间:2016-08-23 11:43:00

标签: html css twitter-bootstrap viewport margins

首先你好。

我在大型设备上使用带有全宽标题背景颜色的Bootstrap没有问题,容器流体排序对我来说然而我想要实现的是调整大小到更小的屏幕尺寸(即< 768)全宽背景不再是全宽,并且在视口边缘处有左右边距/装订线。

例如:

<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>

给出一个居中的标题,在较大的视口上两边都有边距(这只是我想要的小屏幕),但当我调整视口大小时,标题会变为视口的全宽。

正确的方法是什么?...我可以将容器放在另一个容器中并使用css和媒体查询更改主容器的背景颜色(即:白色),以便我的内容器(背景颜色黑色)然后将左右边缘/沟槽。也许这是过度设计这个问题,甚至不是语义,有人可以给我更多的见解,

非常感谢

1 个答案:

答案 0 :(得分:2)

container喜欢

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

然后在header

上应用样式