Article 4. Bootstrap grid system offset column and nested column, Article 4. bootstrap

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: