Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap - why row class has margin-left: -20px?

I don't understand why row class has margin-left: -20px (so it grows after parents border like on the image). I think nobody needs this behavior. Or am I doing something wrong?

<div class="container">
        <div id="top-container" class="row">
            <div class="span8">
                <h1>App</h1>
            </div>
            <div class="span4">

            </div>
        </div>
    </div>

example

like image 258
Krab Avatar asked Jul 02 '13 21:07

Krab


People also ask

Why does Bootstrap row have negative margin?

Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. This is to keep content evenly aligned on the edges of the layout. If you don't put a Row in a Container, the Row will overflow it's container, causing an undesirable horizontal scroll.

How do I center a row in Bootstrap?

Use the . align-items-center class in Bootstrap to align single rows of items in the center.

How do I remove the gutter space in Bootstrap?

The gutters between columns in our predefined grid classes can be removed with .g-0 . This removes the negative margin s from .row and the horizontal padding from all immediate children columns.


1 Answers

You can use row-fluid instead of row, then your span4 and span8 won't have margin-left.

<div class="container">
    <div id="top-container" class="row-fluid">
        <div class="span8">
            <h1>App</h1>
        </div>
        <div class="span4">

        </div>
    </div>
</div>
like image 147
mauteri Avatar answered Nov 16 '22 03:11

mauteri