我爱编程

bootstrap之栅格系统理解

2018-03-20  本文已影响0人  IT飞牛

优先级:
col-xs-* < col-sm-* < col-md-* < col-lg-*
我的理解:
当两个class同时满足屏幕尺寸范围时,系统永远会优先调用优先级高的class

首先上官方说明:


image.png

这张图很好说明了移动设备优先的原则,例如:

<div class="col-xs-6 col-md-12 lg-red">内容块1</div>
<div class="col-xs-6 col-md-12 lg-red">内容块2</div>

当屏幕小于992,则col-xs-6生效,一行两列显示;
当屏幕大于992,则col-md-12生效,两行一列显示;

上一篇下一篇

猜你喜欢

热点阅读