Why do I need a negative margin and a positive padding in bootstrap?
Bootstrap'om rarely used, somehow did not delve into these positive and negative indents of blocks.
Tell me, why is there a positive padding in the .container block, and a negative margin in the .row block? What is the practical use of these indents?
2 answers
This is done for alignment.
Each column on the left and right has a padding equal to 15px. It is needed to generate the same indent between the columns. However, in this case, the indent on the left of the first column and the indent on the right of the last column in the row adds up to with the container indents.
To level it, use .row with a negative margin equal to 15px. If you use .row, then the left indent is for the first column and the right indent is for the right column they "fall" into the existing margins of the container and do not take up additional space.
To the question why not remove the indent from the container and abandon the negative margin from .row, the answer is simple: there may be several blocks with a container, and one of them may not have a grid.
In order for the blocks with and without a grid to be aligned on the left and right borders, we just came up with this technique with negative margin. And the padding container itself is also needed in order to its contents didn't stick to the screen border at small resolutions.
Update: with multiple nesting, the column already acts as a container, and the principle of operation is the same.
Negative indent in. row in order to avoid adding up the indents of blocks of different levels in a multi-level structure.
<div class="row">
<div class="col-sm-12" id="outer">
<div class="row">
<div class="col-sm-12" id="inner">
</div>
</div>
</div>
In the example above, the #inner block will be the same size as the #outer block. If the row had no negative padding, then the #inner block would be smaller than the #outer block by 15px on each side.