css - CSS Bootstrap Grid - 包装 Div 不是从其上方 Div 的底部开始

Question

我看到了一个我以前从未遇到过的问题。我已经搜索了答案，但很难找到正确的搜索词来找到解决方案。

我有一排有 3 个 div。使用 Bootstrap，所有三个都有 class="col-md-6"..即 div 占据了行的 50% 宽度。它们里面的内容是动态的，所以每个 div 可能在也可能不在任何给定的视图中。我想要实现的是让它们以这样的方式包装，如果所有三个都有内容，两个将在顶部“行”，第三个在下面。我有那部分工作。

每个 Div 中的内容是动态的，这意味着有时任何给定的 Div 可能比另一个更长。

所以这就是发生的事情：

1. 这就是我希望在场景 01 中发生的事情 - 如果 Col #1 比 Col #2 长，Col #3 会直接填在 Col #2 的下方。这就是我想要发生的事情：

2. 这不是我想要发生的情况 场景 02 - 如果 Col #1 比 Col #2 短。Col #3 在 Col #1 下填充，但它从 Col #2 结束的地方开始，留下一个空白。

3. 这就是我想要发生的情况 场景 02 - 我希望 Col #3 直接填充在 Col #1 下方

有任何想法吗？

提前致谢。

标签： csstwitter-bootstrapflexboxgrid

Answer 1

您好，感谢您在 Stackoverflow 上提出的问题，您尝试做的事情可用于 Bootstrap。但仅使用 col-md-6 类是无法实现的。

所以 Bootstrap 有一个组件，类似的东西在 Bootstrap Documentary 中有描述。可以在这里找到：https ://getbootstrap.com/docs/4.5/components/card/#card-columns

其名为砌体。这也可以通过 Flexbox 和 Javascript 插件实现。

弹性盒： https ://w3bits.com/flexbox-masonry/

Javascript砌体：https ://masonry.desandro.com/

希望这能完成你的工作。