Bootstrap grid system

1. Working principle

1), the data row (. Row) must be included in the container (. Container) to give it the appropriate alignment and padding (padding).

The code is as follows:

<class= "container">        <class = "Row" ></ Div > </ Div >

2), a column (. column) can be added to a row (. row), but the sum of the columns cannot exceed the total number of columns in the split, such as 12.

The code is as follows:

  <Divclass= "Container">        <Divclass= "Row">            <Divclass= "Col-md-4"></Div>            <Divclass= "Col-md-8"></Div>        </Div>  </Div>

3), the specific content should be placed within the column container (columns), and only the columns (column) can be used as a direct child element of the row container (. Row).

4), create the spacing between columns by setting the padding (padding). The effect of the padding (padding) is then offset by setting a negative margin (margin) for the first column and the last column.

2. Basic usage

3. Column offset (col-md-offset-*)

Where the * number represents the number of column combinations to offset. You add "col-md-offset-4" on the column element to indicate that the column moves the width of the 4 columns to the right.

4. Column sorting (col-md-push-* and col-md-pull-* (where the asterisk represents the number of column combinations moved))

5. Nesting of columns

The code is as follows:

<Divclass= "Container">    <Divclass= "Row">        <Divclass= "Col-md-8">I have a grid nested inside.<Divclass= "Row">            <Divclass= "Col-md-6">Col-md-6</Div>            <Divclass= "Col-md-6">Col-md-6</Div>          </Div>        </Div>    <Divclass= "Col-md-4">Col-md-4</Div>    </Div>    <Divclass= "Row">        <Divclass= "Col-md-4">. col-md-4</Div>    <Divclass= "Col-md-8">I have a grid nested inside.<Divclass= "Row">          <Divclass= "Col-md-4">Col-md-4</Div>          <Divclass= "Col-md-4">Col-md-4</Div>          <Divclass= "Col-md-4">Col-md-4</Div>        </Div>    </Div>    </Div></Div>

Bootstrap grid system