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> col2 </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> col </div> <div> col3 </div> <div> col4 </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:

The above section describes all the offset columns and nested columns of the Bootstrap grid system. I hope this will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!