Bootstrap basic learning (IV)-grid system (column offset, sorting, and nesting) and bootstrap Grid

Bootstrap basic learning (IV)-grid system (column offset, sorting, and nesting) and bootstrap Grid

Grid System-column offset, column sorting, column nesting

 

Column offset:Sometimes, we do not want two adjacent columns to be together, but we do not want to use margin or other technical means. In this case, you can use the column offset function. Column offset is also very simple. You only need to add the class name "col-md-offset-*" to the column element (the asterisk indicates the number of column combinations to be offset ), the column with this class name will be offset to the right. For example, you add "col-md-offset-4" on the column element to indicate that the column moves the width of four columns to the right.

<Div class = "container"> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-2 col-md-offset-4"> column to the right to move the spacing of the four columns </div> <div class = "col-md-2">. col-md-3 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-4 col-md-offset-4"> column to the right to move the spacing of the four columns </div>Column offset

Note: When you use "col-md-offset-*" to offset the right of a column, make sure that the total number of columns and the offset Columns cannot exceed 12, otherwise, the columns are disconnected.Such:

<Div class = "row"> <div class = "col-md-3">. col-md-3 </div> <div class = "col-md-3 col-md-offset-3"> col-md-offset-3 </div> <div class = "col-md-4"> col-md-4 </div>Column offset fracture

In the code above, the total number of columns and offset columns is 3 + 3 + 3 + 4 = 13> 12, so the column is broken.

The following figure shows the sample code:

 

Column sorting:Column sorting actually changes the column direction, that is, changes the Left and Right floating, and sets the floating distance. In the mesh system of the Bootstrap framework, the class name "col-md-push-*" and "col-md-pull-*" are added. The asterisk indicates the number of columns to be moved. ). Let's take a simple example:

<Div class = "container"> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-8">. col-md-8 </div>Column sorting

By default, the above Code works as follows:

If you want to swap locations, you need to move the col-md-4 to the right the distance of eight columns, that is, eight offset, that is, in "<div class =" col-md-4 ">" add the class name "col-md-push-8" and call its style. You also need to move the col-md-8 to the left the distance of 4 columns, that is, 4 offset, add the class name "col-md-8" on "<div class =" col-md-pull-4 "> ", the code and effects are as follows:

<Div class = "container"> <div class = "row"> <div class = "col-md-4 col-md-push-8">. col-md-4 </div> <div class = "col-md-8 col-md-pull-4">. col-md-8 </div>Column sorting (Interchange position)

 

 

Column nesting:You can add one or more row containers in a column, and insert columns in this row container (Use columns as described earlier ). However, when the row container (row) in the column container is 100% in width, It is the width of the current external column. Let's look at a simple example:

<Div class = "container"> <div class = "row"> <div class = "col-md-8"> I nested a grid inside <div class = "row"> <div class = "row"> div class = "col-md-6"> col-md-6 </div> <div class = "col-md-6"> col-md-6 </div> <div class = "col-md-4"> col-md-4 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-8"> inside me nested a grid <div class = "row"> <div class = "col-md-4"> col-md-4 </div> <div class = "col-md-4"> col-md-4 </div> <div class = "col-md-4"> col-md-4 </div> </div>Column nesting

The Code is as follows:

 

Note: The total number of nested columns must not exceed 12. Otherwise, a new line is displayed for the last column.