将Bootstrap容器类设置为最大940px

Question

我正在使用Bootstrap 4，并且容器在桌面屏幕上的默认宽度为

。

我希望我的应用的主要内容部分在大屏幕上最大为940px容器。

我是简单地覆盖引导容器类，还是创建新的类container-2？还是其他？

编辑

Answer 1

根据bootstrap.css，您可以构建自己的容器类。这些是您必须“重建”的类：

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  min-width: 992px !important;
}

您永远不应覆盖原始的bootsrap类。

---

为确保一切正常，您可以执行以下操作：

@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

@media (min-width: 1200px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

.container.max-width-940 {
  min-width: 940px !important;
}

并使用它，例如：<div class="container max-width-940"></div>

Answer 2

change css in bootstrap file

单击上面的链接，然后在bootstrap.min.css文件中将指向2的值替换为940px。

Answer 3

由于Bootstrap容器具有响应能力，并使用媒体查询来设置最大宽度。

单独的容器仅用于定义宽度，自动边距和填充。其他网格类（即行，列）不依赖于它，因此它将最容易定义自己的自定义容器。

要定义自己的$(this).val(formatNumber(input)); ...

container-940

演示：https://www.codeply.com/go/QOAjmGLp7K

或者，如果您想使用现有的.container-940 { width: 100%; max-width: 940px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } ，则覆盖范围将是...

.container

演示：https://www.codeply.com/go/QOAjmGLp7K

---

如果要更改，将最大宽度减小为较小的宽度，而不是根据需要调整媒体查询：

@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}

---

Answer 4

也许很明显，但这取决于代码中首先引用的是：引导CSS或您的个人CSS文件。万物都等于最后一个参考胜利。

Answer 5

您应该在bootstrap/scss/_variables.scss

中更改变量

看看_variables.scss source的第210行，这些数字表示.container的宽度，以像素为单位，具有不同的分辨率。