css - Why does the bootstrap .row class have a default margin-left of -30px?

Question

When I do boostrap I have to use the class "row" ...

When you look at my test design:

Why I am forced with a margin-left of -30px?

With this html I would expect 3 rows sharing each column 33% of the whole available width:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

The gray area with the buttons is from this code:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>

1. Why does the whole 3-column design fall together when I remove the -30px margin-left?

2. How should I change my code to really get a 3 column layout each column having the same width. This is what span4 should do.

Answer 1

question 1:

the spans all have a margin-left of 30px to create some space between the single blocks. this space should only appear between the single spans and not at the beginning (or end) of the row. to accomplish this, there are several possibilitys - for example:

• create a negative margin with the space-with on the row (this is what bootstrap does)
• use the :first-child selector to remove margin-left on the first span in a row
• [to be continued]

i can only assume the bootstrap uses the first option because it's more compatible with older browsers (most likely IE 7 and below).

a little example: lets say your spans have a width of 100, a space of 10 and there are 3 in a row.

• your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
• a single span has a width of 110 (100 width + 10 magin-left)
  • simply adding those up would give you a width of 330 and an ugly space of 10 at the beginning (10 + 100 + 10 + 100 + 10 + 100 = 330)
  • "subtract" 10 with one of the listed methods (-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
    • hooray, we've created great things with the power of math

question 2 if you use span4s, you already have 3 columns of the same width. you don't need to change anything.