twitter-bootstrap - 自定义 Bootstrap .container 的最大宽度值

Question

我是 Bootstrap 的新手，可能“问错了问题”，但问题是:

似乎默认情况下 Bootstrap 将 .container 的最大宽度限制为 1170px:

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

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

在 ASP.Net MVC web 应用程序中，Site.css 包含在 Bootstrap.css 之后，所以我将其添加到 Site.css:

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

然而，它没有效果。现在，如果我将 Site.css 中的上述代码片段更改为使用 1200px 而不是 1500px，它可以工作，但在实际宽度为 1200px 的浏览器窗口上使用它是不正确的。

如何正确实现:如果浏览器窗口至少有 1500 像素宽，那么 Bootstrap 容器的最大宽度将设置为 1370 像素？还是我看错了？

实际上，将上面的代码片段添加到 Site.css 后效果很好。让我失望的是我将 Windows 屏幕字体设置为 125%，它会影响计算——1500px 变成 1500px*1.25=1875px，1370px 变成 1712.5px。因此，一旦我的浏览器窗口宽度小于 1875 像素(略低于全屏)，我就会降到较低的宽度范围。

Answer 1

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

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

因此您需要改写宽度属性。

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

或使用您选择的任何 % 加上新的 max-width 属性覆盖宽度。

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