css - 当 Bootstrap 4 的视口(viewport) < XXXpx 时，容器(不是容器流体)可以是 100% 宽吗？

Question

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

我将其添加到我的 CSS 中:

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

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

可以看到here .

当我调整浏览器大小时，一切都会按照我的预期进行调整，但这是否只是运气好，改变 Bootstrap 核心值的宽度完全提升了网格？这是使用 .container-fluid 执行此操作的“正确”方法吗？

Answer 1

这是您问题的确切解决方案:https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap

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

在bootstrap_config和_variables中，您可以指定每个断点的位置以及触发断点的屏幕宽度。

注意:在这种情况下，lg 代表您自己选择的断点，您希望为其赋予值 1200px

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

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