Bootstrap - Why: Row remove margin-left & not Row-fluid

Question

Row : margin-left: -20px;

Row-fluid : nothing about margin-left.

Why row-fluid is not removing this margin-left by a certain % ?

Edit :
.row-fluid > .span is adding margin-left.

Answer 1

You can find out more about the fluid aspects of Bootstrap here: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

It's because <span> tags ecapsulated within .row have a margin-left: 20px. The negative left margin is to counter this so that the row displays correctly. With the .row-fluid > span relationship, span tags within that encapsulation don't have a left margin therefore this doesn't need to be corrected within .row-fluid

Answer 2

That's hard to explain, your answer is in bold, the rest is context.

What's the logic when in static layout?

The span elements have margin-left: 20px to stay separated from other spans.

The row element has margin-left: -20px to ensure that the first span -or any span placed at the "left column"- is placed at the begining of the container.

It works because the static row has not set its width, so that margin-left: -20px does not substract width to the element, that continues filling its ancestor.

What happens in a fluid layout?

We could try the same logic, but the difference is that the width and margin-left of span elements is defined in percents, so if we increase the actual width of the row element (by applying a negative margin), these span elements also increase its size, so they don't fit within the container.

So fluid layout uses a different technique for achieving a similar result, just applies a margin-left: 0 to the :first-child.

Digging deeper

And why not use the same strategy in both layouts? Sure, that will simplify the implementation, but the static technique (that is not applicable to fluid) is more powerful. That's because any element that falls in the "left column", being :first-child or not, will became "margin-corrected". Static layouts need that kind of behaviour to comfortably providing responsiveness, fluid layouts can -more or less- manage without it.