自定义Bootstrap .container的最大宽度值 [英] Customizing max-width value for Bootstrap .container

问题描述

我是Bootstrap的新手，也许是提出错误的问题"，但事情就这样了:

I am new to Bootstrap and maybe "asking the wrong question" but here it goes:

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

it seems that by default Bootstrap limits max-width for .container to 1170px:

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

在我的ASP.Net MVC Web应用程序中，有一张表，其中1170px不够，并且该应用程序针对具有1920x1080显示器的台式机.所以我想利用更多的可用空间.

In my ASP.Net MVC web application there is a table where 1170px is just not enough and application is targeted for desktops with 1920x1080 monitors. So I would like to utilize more of available space.

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

In ASP.Net MVC web application there is Site.css that is included after Bootstrap.css so I added this to 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(仅比全屏屏幕稍低一点)，我就会下降到较低的宽度范围.

Actually, the snippet above works fine when added to Site.css. What was throwing me off was that I had Windows screen fonts set to 125% and it affects calculations - 1500px becomes 1500px*1.25=1875px and 1370px becomes 1712.5px. So as soon as my browser window width got less than 1875px (just a tad below full-screen) I would get dropped to the lower width range.

推荐答案

根据我使用Bootstrap v3.3.7的了解，容器类上没有max-width属性.

From what I can tell using Bootstrap v3.3.7 there is no max-width property on the container class.

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

There is a width property. Which will decide the actual width if it is smaller then max-width.

因此，您需要改写width属性.

So you need to override the width property instead.

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

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

or override the width with whatever % you choose plus a new max-width property.

请记住在引导程序后加载您自己的样式，否则您必须使用！important.

Remember to load your own styles after bootstrap or you have to use !important.

这篇关于自定义Bootstrap .container的最大宽度值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！