Bootstrap Grid，我需要一个容器吗？答案

【问题标题】：Bootstrap Grid, do I need a container?Bootstrap Grid，我需要一个容器吗？
【发布时间】：2013-10-04 12:44:45
【问题描述】：

我一直在玩 bootstrap 3，我注意到如果您在没有容器的情况下使用网格系统，它会变得流畅，有人告诉我不应该这样做，因为系统被设计为在容器内。如果我不使用容器类会发生什么？，我需要它吗？如果是这样，我可以在不弄乱引导程序的媒体查询的情况下使容器类宽度为 100%，或者是否有任何其他或更好的方法来构建流体使用引导程序 3 进行布局。

【问题讨论】：

Full width layout with twitter bootstrap 的可能重复项

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

更新引导程序 4

在 Bootstrap 4 中，最外层的行也应该包含在 container 或 container-fluid 中，以防止由 .row 上的负边距引起的水平缩放。

引导程序 3

您应该将row 包裹在container 中，否则您会遇到BS 3 用于row 元素的负边距问题。基本上row 被设计成在一个容器内。 Read more on the Bootstrap grid

在 Bootply 上玩这个例子：http://bootply.com/83751

【讨论】：

【解决方案2】：

删除外部容器（或至少其 css 类分配）是合理的：

需要无边框设计？删除父 .container 或 .container-fluid。

这似乎是自 4.0 版本以来的文档中：https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

这可能会在右侧留下一些空白。在没有容器的情况下将“no-gutters”类添加到行中为我修复了它。

【解决方案3】：

只需使用容器流体类而不是容器类。 class="container-fluid" 将允许您使用全宽。

【讨论】：

容器流体是否已从 Bootstrap 3 中移除，以支持仅使用行和列？
container-fluid 已添加回 Bootstrap 3。
容器流体的最大宽度为 1200px

【解决方案4】：

我认为你需要它。如果没有容器，它会起作用 - 但它会在页面底部显示一个水平滚动条，并且从屏幕右侧切掉大约 20 像素。

看看在没有容器类的情况下它是如何工作的 - 只需转到 http://getbootstrap.com/ 并使用检查元素删除容器类。

【讨论】：

该站点没有使用流体宽度/流体布局，但实际上并不适用。如果使用全角布局，则不再需要容器，因为容器流体已从 BS3 中删除。