Bootstrap 3容器 - 液体与偏移

Question

我试图在容器流体内获得1170px宽度的col。

这个

<div class="container-fluid">
  <div class="col-md-8 col-md-offset-2">
    <h2>Container-Fluid with Offset</h2>
  </div>
</div>

与此

不同

<div class="container">
    <h2>Container</h2>
</div>

最好的方法是在容器内加入1170px的宽度？

Answer 1

容器 - 液体是全宽容器。这意味着它没有边距或填充。

您需要注意引导结构是容器＆gt;行＆gt;列 遵循这一点的主要原因是保持视觉结构的浏览器支持的“挂钩规则”。或者您将体验旧浏览器的“错误”。

如果您想要全宽度列，则在包含偏移量时包含12或类似的列。 12是每行的最大列数。看看bootstrap grid

.myclass {
background:#ffcc00;
}

<div class="container-fluid">
    <div class="row">
    <div class="col col-xs-12 myclass">
    PEACE IN THE WORLD
    </div>
    </div>
    </div>

如果您想要特定的宽度列，也可以在行内使用自定义div。 Bootstrap列的大小相对较小。

.myclass {

width:1170px;
background:#ffcc00;
}

<div class="container-fluid">
    <div class="row">
    <div class="myclass">
    PEACE IN THE WORLD
    </div>
    </div>
    </div>