Question

我是Bootstrap的新手，也许＆＃34;提出错误的问题＆＃34;但在这里：

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

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

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

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

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

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

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

实际上，上面的代码段在添加到Site.css时工作正常。什么让我失望的是我将Windows屏幕字体设置为125％并影响计算 - 1500px变为1500px * 1.25 = 1875px和1370px变为1712.5px。因此，只要我的浏览器窗口宽度小于1875px（仅比全屏低一点），我就会降低到较低的宽度范围。

Answer 1

从我使用Bootstrap v3.3.7可以看出，容器类上没有max-width属性。

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

所以你需要覆盖width属性。

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

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

请记住在引导后加载自己的样式，或者必须使用！important。

Answer 2

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

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

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

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

2 个答案: