码迷,mamicode.com
首页 > 其他好文 > 详细

[Bootstrap] 2. class 'row' & 'col-md-x' & 'col-md-offset-x'

时间:2015-02-16 18:16:12      阅读:639      评论:0      收藏:0      [点我收藏+]

标签:

Usually when desgin a web page, we think building the page in grid.

Bootstrap can help us to do that.

It divides the page into 12 cols. In the picture, there are three rows, on the top is header (it takes 12 cols), in the middle there is two cols, in the bottom, there are three cols.

 

技术分享技术分享

技术分享

技术分享

技术分享

 

You can finish this work quickly by using ‘col-md-x‘ class: it should sum up to 12 for each row.

技术分享

 

To organize the code structure better, you can but add ‘row‘ class:

技术分享

 

If one row exceeds 12 cols, the page layout would broken.

 

If you want to add more padding:

技术分享

 

You can use ‘col-md-offest-x‘ class:

技术分享

 

Result:

技术分享

[Bootstrap] 2. class 'row' & 'col-md-x' & 'col-md-offset-x'

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/4294314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!