Rasterization layout in Bootstrap

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.