自定义 Bootstrap .container 的最大宽度值答案

【问题标题】：Customizing max-width value for Bootstrap .container自定义 Bootstrap .container 的最大宽度值
【发布时间】：2017-03-20 15:41:50
【问题描述】：

我是 Bootstrap 的新手，可能“问错了问题”，但它是这样的：

似乎默认情况下，Bootstrap 将 .container 的最大宽度限制为 1170 像素：

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

在我的 ASP.Net MVC Web 应用程序中，有一个表格，其中 1170 像素还不够，应用程序针对具有 1920x1080 显示器的桌面。所以我想利用更多的可用空间。

在 ASP.Net MVC Web 应用程序中，Site.css 包含在 Bootstrap.css 之后，因此我将其添加到 Site.css：

@media (min-width: 1500px) {
  .container {
    max-width: 1370px;
  }
}

但是，它没有任何作用。现在，如果我在 Site.css 中将 sn-p 更改为使用 1200px 而不是 1500px 它可以工作，但在实际上是 1200px 宽的浏览器窗口上使用它是不正确的。

~~如何正确实现：如果浏览器窗口的宽度至少为 1500 像素，那么 Bootstrap 容器的最大宽度将设置为 1370 像素？还是我从错误的角度看这个？~~

实际上，上面的 sn-p 在添加到 Site.css 时可以正常工作。让我失望的是我将 Windows 屏幕字体设置为 125%，它会影响计算 - 1500px 变为 1500px*1.25=1875px 和 1370px 变为 1712.5px。因此，一旦我的浏览器窗口宽度小于 1875 像素（仅略低于全屏），我就会下降到较低的宽度范围。

【问题讨论】：

如果你使用百分比max-width: 90%;有什么变化吗？
为什么不使用 .container-fluid 使其扩展以填充可用宽度。

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

据我所知，使用 Bootstrap v3.3.7 容器类没有 max-width 属性。

有一个宽度属性。如果它小于最大宽度，它将决定实际宽度。

所以你需要改写 width 属性。

@media (min-width: 1500px) {
  .container {
    width: 1370px;
  }
}

或者用你选择的任何 % 加上一个新的 max-width 属性来覆盖宽度。

请记住在引导后加载您自己的样式，否则您必须使用 !important。

【讨论】：

【解决方案2】：

Bootstrap 是可定制的，您可以更改容器大小（以及许多其他内容）here。您可能还想在 site.css 中将 !important 属性添加到您的媒体查询中以使其工作：

@media (min-width: 1500px) {
  .container {
    width: 1370px !important;
  }
}

另外，如果您还没有尝试过，请确保更改两个 CSS 文件中的媒体查询。

【讨论】：