The beauty of the Bootstrap raster system is the bootstrap raster.

The beauty of the Bootstrap raster system is the bootstrap raster.

Excerpt from The Subtle Magic Behind Why the Bootstrap 3 Grid Works

It has been a long time since we started to get started with Bootstrap. It makes people feel fast, simple, and easy to use. The grid system is one of the highlights:

It always feels like a CSS raster system. You just need to use it without going into the principle behind it. One day, you will find that there is a problem, interval, and internal and external margins on a slightly complex page.

Of course there will be such a process, and with the accumulation of knowledge, you can read some Bootstrap source code, combined with the document will find some points that are not very understandable:

Rows must be placed within a. container (fixed-width) or. container-fluid (full-width) for proper alignment and padding.

"Row" must be included in. container (fixed width) or. container-fluid (100% width) to give it an appropriate arrangement (aligment) and inner padding (padding ).

CONTAINER

Container has two functions:

1. Provide the Width limit in any possible width variation (response type. When the page width changes, the container width also changes. And the column width is based on the percentage, so their values do not need to be changed.

2. A horizontal padding is provided so that the content inside the browser is not exposed to the border of the browser. The size is 15 PX, which is the pink part of the image. The function is described below.

Note that you do not need or need to nest another iner in the container.

ROW

Row is a container that directly exists in the column. According to the document, the row can contain up to 12 columns, but it can be flexibly expanded using the nesting method. At the same time, it is the wrapper of the left floating column and comes with the nature of clearfix.

At the same time, row has a special feature, that is, the left and right sides have a-15px margin, which is the blue part of the image. This will offset the 15px padding in the container mentioned above. Why is it so hard? Next, read it.

Note: Always remember to put the row inside the container to ensure normal operation.

COLUMN

Note that each column also has a horizontal padding of 15px, which is the yellow part of the picture. Do you still remember the role of the row mentioned above? colunmn can only survive in the row. Because the margin of the row is-15px, the column on both sides will encounter the boundary of the container. However, colunmn itself has a 15px padding so that its content does not touch the container, and there is a 30px slot between the content of different columns. Take a look at the image at a glance.

Note: You must put the column in row.

NESTING

When you set the above series of iner, row, and column, you can use nesting to expand its grid system, that is, directly nest row in column, instead, you do not need to set another layer of iner:

Do you still remember that both container and column have 15 PX padding? The role of column in nseting is equivalent to that in container, so that any nesting can be implemented.

This is exactly the most clever part of the Bootstrap raster system!

This article was first collected to GET from black and white world 4648. The original Article is from → segmentfault.com