html - Twitter bootstrap fixed layout issue -


i have gotten weird problem columns using twitter bootstrap. setting test page should behave example here: http://twitter.github.io/bootstrap/examples/hero.html . here's html:

<html> <head>     <meta name="viewport" content="width=device-width, initial-scale=1.0">             <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" />     <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" />     <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" />     <script type="text/javascript" src="/assets/8b15478e/jquery.js"></script>     <script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script> </head> <body>     <div class="container">         <div class="row">             <div class="span4" style="border: 1px solid red;"></div>             <div class="span4" style="border: 1px solid red;"></div>             <div class="span4" style="border: 1px solid red;"></div>         </div>                 </div> </body> 

should produce result shown in link above, third span4 on next line, gets pushed under 2 first. apart container behaves expected, i.e. centered.

what missing here?

border adds pixels width span4 increased 302px (border-left: 1px + border-right: 1px) 300px , hence comes next line. see here

border: 1px solid red;

you can give background instead of border test.

check fiddle


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -