当视口 < XXXpx 且 Bootstrap 4 时，容器（不是容器流体）可以 100% 宽吗？

Question

我正在使用 Bootstrap 4 并注意到我在每个断点都失去了宝贵的水平空间。我希望在浏览器小于 1200 像素时，最外层容器的宽度为 100%。

我将此添加到我的 CSS:

@media (max-width: 1199px) {
  body > .container {
    width: 100%;
    max-width: 1140px;
  } 
}

我使用 1140px 作为宽度，因为这就是文档所说的 .contianer 元素的最大宽度。

可以看到here.

当我调整浏览器大小时，一切都按照我的预期进行了调整，但这是否只是运气好并且从 Bootstrap 的核心值改变宽度完全抬高了网格？这里有 "correct" 使用 .container-fluid 的方法吗？

Answer 1

当您使用 Bootstrap 4 时，您应该使用它的基本功能，例如 media-breakpoints。

在bootstrap_config和_variables你可以指定每个断点的点在屏幕应该有多宽触发它。

注意：在这种情况下，lg 代表您自己选择的断点，您希望给值 1200px

在这种情况下，如果您将 boostrap 配置为在 1200px 处触发 lg classes，那么如果您添加以下代码，在宽度小于1200px，容器 class 的宽度为 100%。

@include media-breakpoint-down(lg){
    .container{
        width: 100%;
        max-width: 1140px;
    }
}

Answer 2

所以当您的视口小于 1200 像素时，您基本上希望容器的行为方式与 .container-fluid 相同。我认为是最正确的做法（通过修改源文件），但如果你不想这样做，那么我认为你的方法是可以的。

不过，我认为您在规则集中使用的 CSS 可以修改。您可以将 max-width 属性设置为 none，这是属性的默认值。这具有取消设置任何 Bootstrap 的 CSS 适用于此属性的效果。

@media (max-width: 1199px) {
    body > .container {
        width: 100%;
        max-width: none;
    } 
}

Can container (not container-fluid) be 100% wide when viewport is < XXXpx with Bootstrap 4?