jquery - 如何让 Bootstrap 四列网格在第二列上跨越两行？

Question

如何让 Bootstrap 四列网格在第二列上跨越两行？

嗨，如果有人可以帮助我实现具有 4 列的投资组合网格(参见图片 enter image description here)，其中第二列跨越 2 行。 (计划将带有悬停字幕效果的图像放入其中)。

我试过这个解决方案，但还没有找到合适的解决方案。链接如下:

How can I get a Bootstrap column to span multiple rows?

Row span in Bootstrap 3?

How to make a div in the middle of two others to span multiple rows, like rowspan in tables

Twitter Bootstrap 3 rowspan and reorder

how to create complex grid in bootstrap 3, (column rowspan)

Twitter Bootstrap 3 rowspan and reorder

提前致谢!

look the scheme

Answer 1

假设所有单元格的高度都相同(如图所示)，您所要做的就是创建一个四列结构，并在其中放置一两个元素。

类似的东西:

<div class="row">
  <div class="col-md-3">
    <div class="single-height">
      1
    </div>
    <div class="single-height">
      5
    </div>
  </div>
  <div class="col-md-3">
    <div class="double-height">
      2
    </div>
  </div>
  <div class="col-md-3">
    <div class="single-height">
      3
    </div>
    <div class="single-height">
      6
    </div>
  </div>     
  <div class="col-md-3">
    <div class="single-height">
      4
    </div>
    <div class="single-height">
      7
    </div>
  </div>
</div>