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

Question

我正在使用 Bootstrap 4 并注意到我在每个断点处都失去了宝贵的水平空间。我希望在浏览器小于 1200 像素时，最外层容器的宽度为 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;
    }
}