问题描述
我是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后,效果很好.让我失望的是,我将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的最大宽度值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!