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 像素？还是我看问题的 Angular 不对？

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

Answer 1

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

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

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

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

或使用您选择的任何％加上新的最大宽度属性来覆盖宽度。

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