Css 当视口为<；时，容器（非容器流体）是否可以100%宽；带引导4的XXXpx？

我正在使用Bootstrap4，并注意到我在每个断点都会丢失宝贵的水平不动产。我希望当浏览器<1200px时，最外层的容器的宽度为100%

我在CSS中添加了以下内容：

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

我使用1140px作为宽度，因为文档中说

.contianer

元素的最大宽度可以是1140px

你可以看到

---

当我调整浏览器的大小时，一切都会按照我的预期进行调整，但这只是一个幸运的例子吗？改变Bootstrap核心值的宽度会完全提升网格？以下是使用

.container fluid

执行此操作的“正确”方法吗？

以下是您问题的确切解决方案：

使用Bootstrap4时，应该使用它的基本功能，如

媒体断点

在引导\u配置和\u变量中，您可以指定每个断点的点，即屏幕触发断点的宽度

注意：在这种情况下，

lg

代表您自己选择的断点，您希望给出值1200px

在这种情况下，如果您将boostrap配置为在

1200px

处触发

lg

类，那么如果您在每个小于

1200px

的屏幕上添加以下代码，则容器类的宽度将为

100%

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

---

因此，当视口小于1200px时，您基本上希望容器的行为与

.container fluid

相同。我认为这是最正确的方法（通过修改源文件），但是如果您不想这样做，那么我认为您的方法是可以的

但是，我认为您在规则集中使用的CSS可以修改。您可以将

max width

属性设置为

none

，这是该属性的默认值。这具有取消设置引导的CSS应用于此属性的效果

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

MDN文章显示

none

作为

max width

的默认值：

---

我想您可能需要指出，您必须修改源sass文件。是的，您必须修改bootstrap_config和_variables文件，并在bootstrap 4

中链接了一篇帮助文章how to do it in bootstrap 4
。container
有一个
max width
属性，因此它需要保留，否则它会跳到1140960，720或540而不是100%。@Daveh0哦，是的，你说得对，对不起。也许最好将其设置为默认值
none
。我将更新我的答案。@Daveh0这将取消启动应用的任何设置。现在我想起来了。
。container
已经应用了这些边距和填充，所以你不需要这些东西。是的，这也是我最后得到的。最后，我可能会使用上面Patrik的解决方案，但这肯定足以满足我的原型需求。谢谢