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

Posted 2023-05-08

【中文标题】如何让 Bootstrap 四列网格在第二列上跨两行？

【英文标题】：How can I get Bootstrap four columns grid span two rows on a second column?

【发布时间】：2016-07-21 06:13:19

【问题描述】：

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

【问题讨论】：

尝试只使用一行，所有浮动元素都可以解决问题。如果没有，请发布一个小提琴进行测试。

用 Bootstrap 的普通 Grid 是不可能的。 Rowspan 是可以应用于 s. 的东西 您可以提供任何代码吗？你能/你尝试过这样的嵌套吗？ bootply.com/Dxd7yctlwi这与照片的结构相同，但计数不正确。第二项称为 5 等。

【参考方案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>

【参考方案2】：

您不能使用引导列网格样式来执行此操作。最高的列将推到最下面的行。您可以使用非常适合引导网格列的砖石来做到这一点。看这里Masonry page

【讨论】：

这是我关于堆栈溢出的第一篇文章，我是 web 开发的新手。砌体似乎是解决该问题的好方法，将进行探索，谢谢。

我希望我的投资组合网格像主题一样，只是没有过滤。你还认为砌石适合它吗？ themezaa.com/html/h-code/home-architecture.html

在这个例子中，所有的盒子都有相同的高度，所以我认为引导它应该足够好，但如果你的图像高度不同，那么砖石是唯一的选择。查看此页面kristianhammerstad.com