首页 > bootStrap只定义col-sm-*是什么意思

bootStrap只定义col-sm-*是什么意思

比如这个例子
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个平列的元素。

【热门文章】
【热门文章】