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

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

    

        
a
        
b
    
    

        
c
    

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