html - 我需要使用 bootstrap 对列进行响应式排列

Question

我有十二个社交偶像。

我想成为:

在桌面模式下排成一行(1 行)

平板电脑模式下每行 3 个(共 4 行)

移动尺寸每行 1 个(构成 12 行)

我有这个标记:

<div class='container'>
   <div class='row'>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

   </div>
</div>

但它很快变成十二行(在平板电脑模式下)。

谢谢

Answer 1

使用

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

对于每个div