Question

我的页面上有许多不同高度的块/ portlet，我希望它们可以很好地堆叠并适应没有间隙的空白区域。 http://www.bootply.com/pYK3fLTn7c在下面的示例中，第4块应该位于第1区，即使在第2区（在第2区下）它不适合白色空间的地方？ Pinterest有一个很好的例子（或http://jsfiddle.net/M34e2/，但我的宽度可能不同）。或者我们可以在不添加插件的情况下执行此操作（我已经可以进行排序）了吗？ http://www.jqueryscript.net/demo/Responsive-Fluid-Drag-and-Drop-Grid-Layout-with-jQuery-gridstack-js/感谢您提前提供任何帮助。

<div class="container-fluid">

  <div class="col-lg-4" style="height: 200px; border: 1px #ccc solid">
    <h1>Block 1</h1>
  </div>
  <div class="col-lg-4" style="height: 100px; border: 1px #ff0 solid">
    <h1>Block 2</h1>
  </div>
  <div class="col-lg-4" style="height: 150px; border: 1px #f00 solid">
    <h1>Block 3</h1>
  </div>
  <div class="col-lg-4" style="height: 175px; border: 1px green solid">
    <h1>Block 4</h1>
  </div>
  <div class="col-lg-4" style="height: 175px; border: 1px blue solid">
    <h1>Block 5</h1>
  </div>
  <div class="col-lg-4" style="height: 75px; border: 1px pink solid">
    <h1>Block 6</h1>
  </div>

</div><!-- /.container -->

Answer 1

要确保第4块小于1，您需要使用一行：

<div class="container-fluid">
  <div class='row'>
    <div class="col-lg-4" style="height: 200px; border: 1px #ccc solid">
      <h1>Block 1</h1>
    </div>
    <div class="col-lg-4" style="height: 100px; border: 1px #ff0 solid">
      <h1>Block 2</h1>
    </div>
    <div class="col-lg-4" style="height: 150px; border: 1px #f00 solid">
      <h1>Block 3</h1>
    </div>
  </div>
  <div class='row'>
    <div class="col-lg-4" style="height: 175px; border: 1px green solid">
      <h1>Block 4</h1>
    </div>
    <div class="col-lg-4" style="height: 175px; border: 1px blue solid">
      <h1>Block 5</h1>
    </div>
    <div class="col-lg-4" style="height: 75px; border: 1px pink solid">
      <h1>Block 6</h1>
    </div>
  </div>
</div>

http://www.bootply.com/xWzvbdxvvi#

请注意，只是为了确保您知道-lg类只能在更高的分辨率下工作。在较小的屏幕上，它将为-md，-sms和-xs大小的屏幕堆叠一个到另一个（块2在块1下）。

[更新时间：2015-03-18每篇评论] 如果您只想让它们垂直堆叠而没有空间，那么唯一的另一个选择就是：

<div class="container-fluid">
  <div class="row">
    <div class='col-lg-4'>
      <div style="height: 200px; border: 1px #ccc solid">
        <h1>Block 1</h1>
      </div>
      <div style="height: 175px; border: 1px green solid">
        <h1>Block 4</h1>
      </div>
    </div>
    <div class='col-lg-4'>
      <div style="height: 100px; border: 1px #ff0 solid">
        <h1>Block 2</h1>
      </div>
      <div style="height: 175px; border: 1px blue solid">
        <h1>Block 5</h1>
      </div>
    </div>
    <div class="col-lg-4">
      <div style="height: 150px; border: 1px #f00 solid">
        <h1>Block 3</h1>
      </div>
      <div style="height: 75px; border: 1px pink solid">
        <h1>Block 6</h1>
      </div>
    </div>
  </div>
</div>

这将在同一列中垂直堆叠，但这会以完全不同的方式限制您。

Bootstrap是关于为每个观看尺寸手动配置网格到你想要的显示器......它不会像你提供的链接那样动态地试图拼凑你的部分像报纸一样。

Answer 2

您提供的链接示例在刷新时更改布局并使用js。如果使用引导程序，而不是添加行，则会产生不太可预测的布局，如果使用12列引导程序网格，则任何cols加起来超过12包裹到下一行。 -lg类用于桌面/更高分辨率。您可以为每个div添加多个类来处理较小的分辨率。

Bootstrap Columns不能正确堆叠？

2 个答案: