html - 在 Bootstrap 中正确使用容器流体

Question

第一个问题:

假设我的网站中有一个部分，我想将 container 的宽度设置为 1200px。在本节中，我需要在浏览器屏幕的最左侧放置一个图像，并在右侧放置一些文本。

我假设为了做到这一点，我必须使用 container-fluid 并且我是这样使用它的:

<div class="container-fluid">
 <div class="row">
 <div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
 </div>
</div>

当我在浏览器中检查时:

它出现了一个水平滚动条，我必须删除 .row 类的负边距才能摆脱滚动条。

这是正常的做法吗？

第二个问题:

假设我想创建一个部分，我希望在其中具有全宽背景颜色，并且内容具有默认 Bootstrap 网格宽度 1200 像素。

是否需要创建一个 container-fluid 才能做到这一点？或者只是创建一个额外的 div 并在其中添加背景颜色更好？

Answer 1

在 Bootstrap 中，网格由三个组件定义:容器、行和列。容器有两种形式:容器，它为 Bootstrap 中定义的每个特定断点设置容器的最大宽度，并使容器在视口(viewport)内居中；和容器流体，它只是将宽度设置为视口(viewport)显示的 100%。两个容器都将填充设置为 15px。

行的目的是包含默认向左浮动的列，因此它会自动清除 float 。它有一个 -15px 的边距来抵消容器添加的填充。

列在您的行内。列基于 12 的网格。如果您只需要在 x-small 断点处及以上的一列，则添加一个 col-xs-12。想要在该视口(viewport)宽度处有两个相等的列，请添加两个 col-xs-6。列有 15px 的左右填充，所以总是有一致的间距。

否定容器宽度的行边距可能听起来毫无用处，但它很重要而且非常聪明，因为它允许您将行和列嵌套在其他列中，从而创建无限的网格划分组合。

因此，您的问题是您没有按照设计的方式使用网格。容器内的一行中必须至少有一个列。