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

在使用Bootstrap 4时，应使用其基本功能，例如media-breakpoints。

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

注意：在这种情况下，lg代表您自己的断点，您要为其赋予值1200px

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

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

Answer 2

因此，当视口小于1200px时，您基本上希望容器的行为与.container-fluid相同。我认为Patrik's answer是执行此操作的最正确方法（通过修改源文件），但是如果您不想这样做，那么我认为您的方法是可以的。

但是，我认为您可以修改规则集中使用的CSS。您可以将max-width属性设置为none，这是该属性的默认值。这具有取消设置该属性适用的所有Bootstrap CSS的效果。

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