将 Bootstrap 容器类设置为 940px max

Question

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

我希望我的应用程序的主要内容部分是大屏幕上最大 940 像素的容器。

我是简单地覆盖引导容器类，还是创建新的类 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;
}

你永远不应该覆盖原始的引导类。

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

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