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

我是 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;
  }
}

However, it has no effect. Now, if I change above snippet in Site.css to use 1200px instead 1500px it works but it wouldn't be correct to use this on browser window that is actually 1200px wide.

How can this be properly achieved: if browser window is at least 1500px wide then max-width for Bootstrap container would be set to 1370px? Or am I looking at this from the wrong angle?

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

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

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

所以你需要重写 width 属性。

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

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

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