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

在窗口调整大小时如何重新调整引导程序中的行？

1 个答案: