Adding borders to span divs in Bootstrap messes up layout

Question

I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:

Answer 1

You may also use negative margins :

div.span4, div.span8, div.span12
{
    background-color: #eee;
    border: 1px solid #888;
    border-radius: 3px;
    margin: -1px;
}

It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.

Answer 2

The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:

HTML

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

CSS

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}

Answer 3

I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.

The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.

So for example yours would now be

<div class="container">
    <div class="row-fluid">
        <div class="span4">a</div>
        <div class="span8">b</div>
    </div>
    <div class="row-fluid">
        <div class="span12">c</div>
    </div>
</div>

Now you don't get any issues with changing margins, paddings, or borders.

Answer 4

It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.

Here's a fiddle: http://jsfiddle.net/me73v/

Answer 5

Another option would be to tweak the span widths with JQuery:

$(".some-bordered-container [class*=span] ").each(function(index) {
    $(this).width($(this).width()-1);
});

It seems to work well for me. I don't miss the pixels.