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

Difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3

时间:2015-05-18 22:36:01      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

Difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3[转]

1:

The Bootstrap 3 grid comes in 4 sizes (or "breakpoints").

Tiny (for smartphones .col-xs-*), small (for tablets .col-sm-*), medium (for laptops .col-md-*) and large (for laptops/desktops .col-lg-*).

2:
Small grid (≥768px) = .col-sm-*

Medium grid (≥992px) = .col-md-*

Large grid (≥1200px) = .col-lg-*

3:

The sm, md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically and continue to scale down on the smallest screens.

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

For example, if you start with columns: A B C

You decide when should they stack to be like this:

A

B

C

If you choose col-lg, then the columns will stack when the width is < 1200px.

If you choose col-md, then the columns will stack when the width is < 992px.

If you choose col-sm, then the columns will stack when the width is < 768px.

If you choose col-xs, then the columns will never stack.

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.

 

转自:http://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-twitter-bootstra

 

Difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3

标签:

原文地址:http://www.cnblogs.com/k11590823/p/4512955.html

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