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

Question

String: margin-left: -20px;

String-liquid: nothing about margin-left .

Why doesn't liquid-string remove this margin-left by some % ?

Edit:
.row-fluid > .span adds margin-left .

Answer 1

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

What is the logic in a static layout?

Span elements have a margin-left: 20px to stay separate from other span .

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

This works because the static row did not set its width , so margin-left: -20px does not set the width of the element, which continues to fill its ancestor.

What happens in a liquid layout?

We could try the same logic, but the difference is that the width and margin-left elements of the span defined as a percentage, so if we increase the actual width of the row element using a negative margin ), these span elements also increase its size, so they do not fit inside container .

So fluid layout uses a different method to achieve a similar result, simply applies margin-left: 0 to :first-child .

Digging deeper

And why not use the same strategy in both layouts? Of course, this will simplify the implementation, but the static technique (which is not applicable to the fluid) is more powerful. This is because any element that falls into the "left column", being :first-child or not, will become "corrected by brand." Static layouts need this behavior to comfortably provide responsiveness; fluid layouts can more or less be controlled without it.

Answer 2

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

This is because the <span> tags .row in .row have margin-left: 20px . A negative left margin must counter this in order for the row to display correctly. With the .row-fluid > span relationship, the .row-fluid > span tags inside this encapsulation do not have a left margin, so this need not be fixed within the .row-fluid