Rasterization layout in Bootstrap

Bootstarp's rasterized layout makes our layout simple, and we just need to take advantage of the. Container/.container-fluid,.row, which is an example:

<div class= "Container-fluid" >  

The above example is a simple use of a rasterized layout, so how is it implemented? Take. Container-fluid as an example

The. Container-fluid style is defined as follows:

{  padding-right: 15px;   padding-left: 15px;   margin-right: auto;   margin-left: auto;}

Its main role is to achieve the center of the content, where the padding is to achieve the content will not start from the browser boundaries, then the next. Row

{  margin-right: -15px;   margin-left: -15px;}

Looks like. The margin value of the row offsets the margin value of the. Container-fluid, the content or the beginning of the boundary, which is why, this is related to its nesting, first look at its columns, take col-xs-6 as an example,

{  position: relative;   min-height: 1px;   padding-right: 15px;   padding-left: 15px;}

{  width: 50%;}

which has padding value, so that the content will not touch the container-fluid, and can be seen, the spacing between each of the two columns is 30px; And then we'll answer why. Container-fluid and. Row have padding and margin values, because we can rasterize the layout in a column using. Row, so there's no need to add the. Container style.

Rasterization layout in Bootstrap