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

Question

我在桌面屏幕上使用具有默认宽度的容器的 Bootstrap 4。

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

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

编辑

标签： csstwitter-bootstrapbootstrap-4

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

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

---

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

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