Twitter bootstrap fixed layout issue
Question
I have gotten a weird problem with my columns using Twitter bootstrap. Setting up a test page that should behave like the example here: http://twitter.github.io/bootstrap/examples/hero.html . Here's the 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 the result shown in the link above, but i get the third span4 on the next line, it gets pushed under the two first. Apart from this the container behaves as expected, ie it is centered.
What am I missing here?
2 answers
solution1
0 ACCPTED 2013-04-18 09:34:18
solution2
0 2013-04-18 10:09:01
Applying a border is breaking your layout by adding some width to your span s.
The native bootstrap solution for handling "column styles" are the .well elements.
HTML
<div class="row">
<div class="span4">
<div class="well well-with-my-style">
</div>
</div>
<div class="span4"></div>
<div class="span4"></div>
</div>
CSS
.well-with-my-style {
border: 1px solid red;
background: none;
/* whatever... */
}
That way, you will respect the native layout and take profit from the .well element, but remember that you'll have to override .well styles with your own (using .well-with-my-style class).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.