Article 4. Bootstrap grid system offset column and nested column, Article 4. bootstrap
Offset column:
In the bootstrap grid system, we can use the offset column to shift the right of a column, as shown below:
<Div class = "row">
<Div class = "col-sm-2 col-sm-offset-1"> col2 </div>
</Div>
Class = "col-sm-2 col-sm-offset-1" indicates that the column occupies two portions and moves one portion to the right. The effect is as follows:
The Col-sm-offset-1 represents a right shift. The Col-sm-offset-2 represents two shifts to the right, and so on. The Col-xs class does not support offset columns, but it can be achieved by simply using an empty cell.
Nested column:
We can nest a grid in the content, as shown below:
<Div class = "row">
<Div class = "col-sm-4">
<Div class = "row">
<Div class = "col-sm-2"> col </div>
<Div class = "col-sm-10"> col </div>
</Div>
</Div>
<Div class = "col-sm-8"> <div class = "row">
<Div class = "col-sm-3"> col3 </div>
<Div class = "col-sm-9"> col4 </div>
</Div>
</Div>
The outer layer is a grid with one row and two columns. The first column occupies four portions and the second column occupies eight portions. The first column contains a grid with one row and two columns, the first column occupies 2 portions, and the second column occupies 10 portions. The display effect is as follows: