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生效,两行一列显示;