Question

如何在第二列上获得Bootstrap四列网格跨度两行？

嗨，如果somene可以帮助我实现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>

Answer 2

使用bootstrap列网格样式无法执行此操作。最高的列将推动底行。您可以使用非常适合自举网格列的砌体来完成此操作。在此处查看Masonry page

如何在第二列上获得Bootstrap四列网格跨度两行？

2 个答案: