Brief introduction of Bootstrap grid Layout method

The raster system is used to create a page layout from a combination of row (row) and column (columns), which can be placed in a well-created layout.

How the bootstrap grid system works:

• "row" must be included in   . Container , In order to give it an appropriate arrangement (aligment) and an inner complement (padding) through     Point container, the interface can be placed in the middle of the browser.
• use row to create a set of columns in horizontal direction (column).
• similar to predefined grid classes like  . Row  and  . col-xs-4   These predefined raster classes can be used to quickly create a raster layout. The mixin defined in the bootstrap source code can also be used to create a semantically formatted layout.
• by setting padding to create "column" The interval between (gutter). The effect of padding is then offset by setting a negative margin for the first and last.
• . col-xs-4 .

choose a different prefix based on different screen conditions Small screen devices (<768px) use the. col-xs-format Size

Small screen Device tablet (≥768px). col-sm-

Medium-screen Device Desktop (≥992px) . col-md- Large screen device Desktop (≥1200px). col-lg-

12 columns: 60PX spacing per cell is 20PX (most commonly used) is 336 or 363, etc.

16 columns: 40PX pitch per grid is 20PX

24 columns: 30PX pitch per grid is 20PX

32 columns: 20PX pitch per grid is 20PX

Different content uses the corresponding format, in the same column use different prefix effect different large relatively small is stacked and small relatively large is flat side by side if the use of small screen when stacked together can use the ultra-small screen to achieve then he will not stack

Column offset: Use to .col-md-offset-大小  offset columns to the right. Use the * selector to add all columns to the left margin of the column.

For example. A. col-md-offset-3 offset A to the left 3 grid

In this case, you can also use nested methods to complete different formats.

Brief introduction of Bootstrap grid Layout method