javascript - Bootstrap Columns 不堆叠吗？

Question

我的页面上有许多不同高度的 block /portlet，我希望它们能够很好地堆叠并适合空白区域而没有间隙。 http://www.bootply.com/pYK3fLTn7c在下面的示例中，Block 4 应该在 Block 1 下面，即使在它所在的位置(在 Block 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

要确保 block 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、-sm 和 -xs 大小的屏幕，它会将一个堆叠在另一个上( block 2 在 block 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 是关于手动将您的网格配置为您想要的每个查看大小的显示...它不会动态地尝试将您的部分拼凑在一起，就像您提供的链接似乎所做的那样。