Css 将引导容器类设置为940px max

我正在使用Bootstrap4，容器在桌面屏幕上的默认宽度

我希望我的应用程序的主要内容部分是大屏幕上的max 940px容器

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

编辑

---

您应该在

引导/scss/\u variables.scss

---

请看第210行的数字，它们表示不同分辨率下.container的宽度（以像素为单位）。

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

.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;
}

然后像这样使用：

---

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

因为引导容器是响应的，并且使用媒体查询来设置最大宽度

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

要定义自己的

容器-940

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

演示：

或，如果要使用现有的

.container

覆盖将是

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

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

演示：

---

如果要将“最大宽度”更改为小于所需媒体查询的宽度，请执行以下操作：

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

---

---

可能有一些非常明显的东西，但这取决于代码中的第一个引用：引导CSS还是个人CSS文件。所有东西都等于最后一次引用的胜利。

可能重复@DestinatioN在这种情况下，与断点无关。他只希望容器更小。@J.Sadi是正确的，谢谢，但是容器大小和断点彼此相关，应该通过修改

$grid breakpoints

和

$container max widths

变量来更改。对于composer（symfony）项目，我如何做到这一点？通常只使用css direct，如何重新编译等？我想我现在就试试这个。忘了说，你必须继续使用容器类来确保一切都像以前一样工作。看看我更新的答案。将3个类添加到style.css中，并将“container”更改为“container max-width-940”，并没有使容器变小。将chrome inspector的屏幕盖添加到OP.。我的错。。只需删除

.container

和

.max-width-940

之间的空格，就像

.container.max-width-940

一样。编辑了我的答案。这里有一个