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
Post a Comment