javascript - twitter bootstrap 网格可变高度基于图像大小比例

Question

我附上了一张图片，我只是想像这样堆叠我的博客文章。我正在使用 Twitter Bootstrap 3.0。 http://i.stack.imgur.com/X2W1t.jpg

我已经使用了 Masonry 和 Salvattore JS 解决方案，但在我的案例中不起作用。请指导我。提前致谢。阿迪

Answer 1

不确定“但不适用于我的情况”是什么意思。 Bootrap 网格是面向行的，因此您不能真正使用它来制作列，其中元素根据屏幕宽度从一列移动到另一列。

但是你可以在 Bootstrap 网格中制作 3 列:

制作一行，包含 3 个 4 单元格的列，然后在每一列中使用 12 单元格(整行)创建任意数量的行。

例如:

<div class="row">  <!-- entire screen -->
   <div class="col-md-4"> <!-- left column -->
      <div class="row"><div class="col-md-12"> Item 1.1 </div></div>
      <div class="row"><div class="col-md-12"> Item 1.2 </div></div>
      <div class="row"><div class="col-md-12"> Item 1.3 </div></div>
   </div>
   <div class="col-md-4"> <!-- center column -->
      <div class="row"><div class="col-md-12"> Item 2.1 </div></div>
      <div class="row"><div class="col-md-12"> Item 2.2 </div></div>
   </div>
   <div class="col-md-4"> <!-- right column -->
      <div class="row"><div class="col-md-12"> Item 3.1 </div></div>
      <div class="row"><div class="col-md-12"> Item 3.2 </div></div>
      <div class="row"><div class="col-md-12"> Item 3.3 </div></div>
      <div class="row"><div class="col-md-12"> Item 3.4 </div></div>
   </div>
</div>