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

【问题标题】：Set Bootstrap container class to 940px max将 Bootstrap 容器类设置为最大 940px
【发布时间】：2019-05-14 14:56:54
【问题描述】：

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

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

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

编辑

【问题讨论】：

Bootstrap 4 Change Breakpoints的可能重复
@DestinationN 在这种情况下与断点无关。他只希望容器更小。
@J.Sadi 是的，谢谢
可以，但是容器大小和断点是相互关联的，应该通过修改$grid-breakpoints和$container-max-widths变量来改变

标签： css twitter-bootstrap bootstrap-4

【解决方案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;
}

您永远不应覆盖原始引导程序类。

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

@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>

【讨论】：

我想我先试试这个。
忘了说，你必须继续使用容器类来确保一切都像以前一样工作。看看我更新的答案。
将 3 个类添加到 style.css 中，并将“容器”更改为“容器 max-width-940”，并没有使容器变小。为 OP 添加了 chrome 检查器的屏幕截图。
我的错.. 只需删除.container 和.max-width-940 之间的空格，例如.container.max-width-940。编辑了我的答案。这是working example

【解决方案2】：

change css in bootstrap file

点击上面的链接，在 bootstrap.min.css 文件中用 940px 替换指向的 2 值。

【讨论】：

【解决方案3】：

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

单独的容器仅用于定义宽度、自动边距和内边距。 其他网格类（即行、列）不依赖它，所以它会最容易定义自己的自定义容器。

定义你自己的container-940...

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

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

或者，如果您想使用现有的.container，覆盖将是...

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

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

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

如果您想更改最大宽度在较小的宽度上比您根据需要调整媒体查询更小：

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

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

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

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

【讨论】：

【解决方案4】：

也许有一些非常明显的东西，但这取决于代码中首先引用哪个引用：引导 CSS 或您的个人 CSS 文件。一切都等于最后一个参考获胜。

【讨论】：

【解决方案5】：

你应该改变bootstrap/scss/_variables.scss中的变量

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

【讨论】：

对于作曲家 (symfony) 项目，我该如何做？通常只使用 css direct，如何重新编译等？