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

Question

比如这个例子
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的效果，是怎么实现的？

Answer 1

哈哈，col-**对应着不同尺寸的屏幕，bootstrap是移动优先，源码用的是min-width,col-sm意味着等于或大于（如果没有设置更大屏幕对应的col）sm的屏幕，所以小于sm的屏幕你是没有设置的，也就相当于div默认的了

Answer 2

col-sm-* 是平板设备的响应，如果你的不设置 col-xs-* 就默认 col-xs-12，如果你设置 col-xs-3，那在手机屏幕下面也会出现4个平列的元素。