将Bootstrap容器类设置为最大940px [英] Set Bootstrap container class to 940px max

问题描述

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

I'm using Bootstrap 4 with the container at default width on my desktop screen.

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

I want the main content section of my app to be max 940px container on big screen.

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

Do I simply override the bootstrap container class, or create new class container-2? or something else?

编辑

推荐答案

根据bootstrap.css，您可以构建自己的容器类.这些是您必须重建"的类:

according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':

.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类.

You should never override original bootsrap-classes.

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

To ensure that everything works well you could do something like this:

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

这篇关于将Bootstrap容器类设置为最大940px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！