比如这个例子
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_portfolio&stacked=h
<div class="col-sm-3">
<p>Some text..</p>
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
只写了 class="col-sm-3"
但是在超小屏设备上只显示1列,相当于col-xs-12的效果,是怎么实现的?
哈哈,col-**对应着不同尺寸的屏幕,bootstrap是移动优先,源码用的是min-width,col-sm意味着等于或大于(如果没有设置更大屏幕对应的col)sm的屏幕,所以小于sm的屏幕你是没有设置的,也就相当于div默认的了
col-sm-*
是平板设备的响应,如果你的不设置 col-xs-*
就默认 col-xs-12
,如果你设置 col-xs-3
,那在手机屏幕下面也会出现4个平列的元素。