1

I have a website that uses twitter-bootstrap for responsive layout. I upgraded from version 3.0.0 to 3.1.1 and my layout has changed and I can't figure out why.

Here's some simplified JSFiddles that show the issue:

JSFiddle - Working with 3.0.0

JSFiddle - Failing with 3.1.1

The only difference in these fiddles is the bootstrap version. I've reviewed the releases, but can't see anything obvious that has caused this issue.

Apologies for the amount of code/css, I've tried to trim it down to the bare minimum.

My Markup:

<div class="body-panel container">
    <div class="container header">
        <div class="col-md-12">
            <div class="row">
                <div style="width: 100%; max-width: 716px;">
                     <h1>Header logo</h1>

                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-default container center">        
        <div class="container navbar-inner">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 
                    data-toggle="collapse" data-target=".navbar-collapse"> 
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content grey-panel">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="container col-sm-12 home-bg">
                        <div class="container col-sm-5">
                             <h1>Header Text</h1>

                            <p>Some Content:</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Custom Css:

body {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ABC6A3;
}
.body-panel {
    background-color: #fff;
    max-width: 345px;
    padding: 15px;
    border-radius: 10px;
}
.navbar .nav, .navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline;
    /* ie7 fix */
    *zoom: 1;
    /* hasLayout ie7 trigger */
    vertical-align: top;
}
.navbar-default {
    background-color: #fff;
    border-color: #fff;
}
.navbar-inner {
    text-align: center;
}
.header {
    background-color: #ccc;
    text-align: center;
}

.grey-panel {
    background-color: #ccc;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
}
Tanner
  • 22,205
  • 9
  • 65
  • 83

3 Answers3

2

I've managed to figure out the issue, mainly from creating and looking at the simplified JSFiddles above.

The issue is with my use of the .container class, which I have now replaced with .container-fluid and the issue goes away.

JSFiddle - Working with 3.1.1

The answers to the below question may help future users that stumble across the same issue as I had:

bootstrap 3.1 container-fluid vs container

Community
  • 1
  • 1
Tanner
  • 22,205
  • 9
  • 65
  • 83
1

You are using the class container far to often when it is possibly not needed, or could even be replaced with container-fluid.

Having that much padding everywhere could limit your space within the main parent.

Only use container-fluid or container when necessary. The following statement is taken directly from the Bootstrap CSS page:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Try just having container on your main div (most parent wrapper) to make it a fixed width, and either removing container from your child divs to make them fluid within their parent, or giving them container-fluid to make them have a max-width: 100% along with some extra padding.

WORKING EXAMPLE

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Fizzix
  • 23,679
  • 38
  • 110
  • 176
1

I think because they reintroduced the .container-fluid class (it was taken out initially, then put back in following feedback). After reintroducing it, rather than setting max-width on the .container class, they set explicit widths according to the media query.

In the blog entry here http://blog.getbootstrap.com/2014/02/13/bootstrap-3-1-1-released/ they say:

Remove manual full-width container callout now that there's .container-fluid

Your layout works if you replace your <div class="container> with <div class="container-fluid>.

I would say that you have a number of container classes that you don't need. Your HTML could be trimmed massively: Fiddle

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54