Why does the bootstrap .row class have a default margin-left of -30px?
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>
Why does the whole 3-column design fall together when I remove the -30px margin-left?
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.
question 1:
the span
s all have a margin-left
of 30px
to create some space between the single blocks. this space should only appear between the single span
s 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 firstspan
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 span
s 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 span4
s, you already have 3 columns of the same width. you don't need to change anything.
Class row
adds a
-
clearfix
- negative
margin-left
- negative
margin-right
Bootply: http://www.bootply.com/120858
With negative margin at the beginning:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
Without negative margin at the beginning:
<div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>