调整大小时,引导6到3列

Question

我尝试用Bootstrap编码,我有一些问题.我一行有6列(6x1):

<div class="row">
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
    </div>

屏幕下降后,在第一个制动点我想要3x2:

<div class="row">
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
    </div>

之后当屏幕变得太小时我想要1x6

这是screenshoot:

那可能吗？

Answer 1

我想这就是你所追求的:

<div class="row">
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
</div>

bootply的例子

在中断点及以上,你将把所有的div放在一行中.在小断点处,您将有两行三列.在额外的小断点处,您将拥有一个列.