1.一般设定成这样的话,在小屏幕上会堆叠在一起
<div class="row"> <div class="col-md-4 ">COL1</div> <div class="col-md-4 ">COL2</div> <div class="col-md-4 ">COL3</div> </div>
如果不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*
和 .col-md-*
。请看下面的实例,研究一下这些是如何工作的。
<div class="row"> <div class="col-md-4 col-sm-2">COL1</div> <div class="col-md-4 col-sm-2">COL2</div> <div class="col-md-4 col-sm-2">COL3</div> </div>
当屏幕是大屏幕的时候,就是根据col-md-4显示,但屏幕是小屏幕的时候,就根据col-sm-2显示