Repository navigation
Breaking change in 3.0.1: Nested containers don't properly size #11436
Description
The media queries in v3.0.0 set a "max-width" for the ".container" class. This was changed in 3.0.1 to set a "width" instead to support IE 8 which doesn't support "max-width".
This breaks nested ".container" DIVs because the interior ".container" DIVs calculate based on a fixed width instead of the width available in the parent. The net effect is that content overflows on the right.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="border: 1px solid black; background-color: #808080;">
<div class="container" style="border: 1px solid black; background-color: #fcf5eb;">
<div class="container">
<div class="row" style="height: 200px;"></div>
<div class="row">
<div class="col-md-4" style="min-height: 200px; background-color: red;"></div>
<div class="col-md-4" style="min-height: 200px; background-color: yellow;"></div>
<div class="col-md-4" style="min-height: 200px; background-color: blue;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Activity
zlatanvasovic commentedon Nov 10, 2013
I'm unable to reproduce that.
Test case: http://jsfiddle.net/2cd4j/embedded/result/
rwgodfrey commentedon Nov 10, 2013
It happens in your jsfiddle example too but you can't see it because you don't have any visible reference for the outside container. Here is the same example but with a border added to the outside container.
http://jsfiddle.net/kMnWc/embedded/result/
Note that on my machine, the browser window size must be 787 or higher to see the overflow.
zlatanvasovic commentedon Nov 10, 2013
Your border depends on padding. I don't see a usage point with
.containerinside.containerwith borders.rwgodfrey commentedon Nov 10, 2013
I think it would be common with sites that use nested master pages (such as ASP.NET MVC sites). I have a couple of ASP.NET MVC sites where the main layout page has a container with a border that surrounds the entire content area of the page. Pages that use that layout page then have containers in them for positioning of content.
Here's an example: http://www.cfgrace.com
Now that site is still using v3.0.0, but when I change it to v3.0.2 the twitter panel on the right-hand side overflows past the content border at wider page widths. A couple of other sites with similar layouts do the same thing.
rwgodfrey commentedon Nov 10, 2013
Also, it's not the border. Changing the outside container to remove the border and just use a background color demonstrates the same behavior.
http://jsfiddle.net/dQY3t/embedded/result/
zlatanvasovic commentedon Nov 10, 2013
If I wasn't clear, I think that your box model depends on padding. You are right about container's fixed width, I'm working on a fix. ;)
MarcioBarrientos commentedon Nov 21, 2013
I have this problem too, I change the "width" to "max-width" in the .container and now works fine.
example:
< div class="row">
< div class="col-md-8">
< div class="container">
This content will extends to width size and overflows to the right column.
< /div>
< /div>
< div class="col-md-4">
Content at right side
< /div>
< /div>
rwgodfrey commentedon Nov 21, 2013
I initially changed width back to max-width, but I ended up just refactoring my site to take out the nested containers. I created my own class called "nested-container" to apply the centering and padding that I was getting from the "container" class.
mdo commentedon Nov 30, 2013
It's definitely the fixed width and the padding. Nested containers worked before because of
max-widthbut when we changed that in a prior release, it stopped working. However, it still didn't work completely because each nested container would become narrower and narrower.mdo commentedon Nov 30, 2013
See this example for a solution: http://jsbin.com/IhEZadu/1.
Definitely need more testing and feedback though to see if this works everywhere—outdenting nested containers might not always make sense. I think for the time being we just don't recommend it.
Thoughts from anyone else?
zlatanvasovic commentedon Dec 1, 2013
My recommendation is to avoid nested containers.
Fluid containers and rows would fix this (.row -> .container => nesting). :)
2013/12/1 Mark Otto notifications@github.com
Zlatan Vasović - ZDroid
carasmo commentedon Dec 1, 2013
At some point, maybe instead of .container it should be called .page-max-width-container or something so people won't nest it. I assumed that .container is for setting the page width and centering it and wouldn't nest it inside another .container.
mdo commentedon Dec 1, 2013
@carasmo Yeah, something more specific would be nice come v4. Until then, not much to do since negative margin for the nesting would probably screw up some lives 😆.
mdo commentedon Dec 1, 2013
Okay, closing this out since containers have actually never nested "properly" since v3. Here's the lowdown one more time:
max-widthon.containers. That screwed up IE8, so we switched towidth.max-width, the nested containers never stayed their intended width—they were always 30px short (the 15px gutters on either side viapadding).width, the nested containers are never short—they're always the correct width, which is where the problem lies for a few situations.We could scope the
widthfor IE8 only, but that just makes for an even worse edge case. For the time being, we're not going to support those nested containers. If you do wish to use them, add the negative margin as shown in this demo I put together: http://jsbin.com/IhEZadu/1.rwgodfrey commentedon Dec 4, 2013
Agree with the conclusion, and as mentioned earlier I ended up refactoring my site to remove the nested containers. However, the DOCS should probably be updated to explicitly state that nested containers aren't supported.
cvrebert commentedon Dec 4, 2013
Reopening as a docs bug.