我是否总是需要在引导程序中使用容器/容器流体？ [复制]答案

【问题标题】：Do i always need to use a container/container fluid in bootstrap? [duplicate]我是否总是需要在引导程序中使用容器/容器流体？ [复制]
【发布时间】：2019-05-20 03:23:35
【问题描述】：

我在看这个视频，教练说引导程序要求我们在使用网格系统时使用容器/容器流体。然而，即使使用网格系统，她也未能始终使用容器。如果您有 1 行和一堆您做出响应的列，这是否意味着您仍在使用网格系统或者是否需要超过 1 行，因为那是她没有使用容器的情况，我很困惑为什么当引导程序声明我们应该使用容器时她没有？我有点困惑，因为我应该在什么时候使用容器，更重要的是，可以说我不使用容器而只使用网格系统，最终会发生什么？

【问题讨论】：

我认为文档很清楚：Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable. getbootstrap.com/docs/3.4/css/#overview-container .. 建议你换导师
来自同一文档：Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

标签： html css bootstrap-4

【解决方案1】：

您没有明确需要使用 .container or .container-fluid 来使用 Bootstrap，但您应该。 .container 类为您提供了一个固定宽度的容器，.container-fluid 类为您提供了一个横跨视口整个宽度的全宽容器。这两个类实际应用于您的元素的唯一真正规则是padding-left: 15px 和padding-right: 15px。这些是为了counter由.row生成的margin-left: -15px和margin-right: -15px。

如果您不使用.container / .container-fluid，那么您的行将全部“偏移”到页面边缘。当然，您可以轻松地添加自定义规则来解决这个问题，您甚至可能会发现这在制作您想要的布局方面很有优势。

使用.container > .row 和.row 的子级.col-X 的组合来表示列被认为是“最佳实践”。这些列可以占用任意数量的空间，并且可以有任意数量的列，只要它们的总数为12。例如，[.col-12]或[.col-4,.col-4,.col-4]或[.col-9,.col-3]。

另外，不要混淆 Bootstrap 的这种“网格状”布局和 CSS Grid，这是一个完全不同的“框架”，您的讲师可能已经提到过同一时间。

【讨论】：

【解决方案2】：

对于 Bootstrap 3 和 4，用于网格系统的 .row 类使用负水平边距。 .container 和 .container-fluid 使用水平填充来平衡负边距。

如果不使用容器系统，有时会在不同的响应断点处遇到水平滚动条。这通常是父对象的上下文，它是边距/填充值。

您可以在没有容器的情况下使用网格系统，但如果您想按预期使用 Bootstrap 或者您可能会遇到不需要的滚动条，这是一个很好的做法。

【讨论】：