Customizing max-width value for Bootstrap .container

问题

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

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

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

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.

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

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?

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.

回答1:

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

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

So you need to override the width property instead.

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

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

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

回答2:

Bootstrap is customizable, you can change your container size (and lots of other things) here. You may also want to add the !important attribute to your media query in site.css to get it to work:

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

Also, make sure you change the media query in both CSS files, if you haven't tried that already.

来源：https://stackoverflow.com/questions/42907915/customizing-max-width-value-for-bootstrap-container