html - 如何在调整窗口大小时调整 Bootstrap 中的行？

Question

基本上我有 2 行 3 缩略图。当屏幕尺寸缩小(或显示在平板电脑上)时，我想要 3 行的 2 缩略图，当屏幕尺寸缩小到最小(或显示在手机上)我想要每行 1 缩略图。第三个是自己发生的，但我不知道如何获得 3 行 2 列。可视化:

桌面(我有什么)

[][][]

[][][]

平板电脑(我想要的)

[] []

[] []

[] []

我能得到的最好的

[] []

[]

[] []

[]

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

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

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

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

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

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

我不确定在我已经尝试了很长时间的 Bootstrap 中是否有办法做到这一点。

Answer 1

删除中间一行。

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

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

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

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

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

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

一行包含col-12，你可以选择如何划分12，

3x4 =12 = 1 行有 3 个元素

4*4 =16 = 1 行有 3 个元素，1 行有 1 个元素

如果你超过 12，它会进入一个新的“行”。

http://getbootstrap.com/css/#grid