Question

附上图片我只是想像这样堆叠我的博文。我正在使用twitter bootstrap 3.0。 http://i.stack.imgur.com/X2W1t.jpg

我已经使用过Masonry和Salvattore JS的解决方案，但在我的案例中却没有。请指导我。提前致谢。安以轩

Answer 1

不确定你的意思＆＃34;但不能在我的情况下工作＆＃34;。 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>

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

1 个答案: