问题描述
我看到了一个从未遇到过的问题。我一直在寻找答案，但是很难找到合适的搜索词来找到解决方案。
我有一排3格。使用Bootstrap，这三个都具有class =“ col-md-6” ..即div占据行的50％宽度。它们内部的内容是动态的，因此每个div可能存在也可能不在任何给定视图中。我要达到的目的是使它们以这样的方式包装，如果所有三个都包含内容，则两个将位于顶部的“行”中，而第三个位于下面的行中。我有那部分工作。
每个Div内的内容都是动态的，这意味着有时任何给定的Div可能要比另一个更长。
这就是发生的事情：
- 这是场景01中我要发生的事情-如果第1列比第2列长，则第3列将直接填充在第2列下方。这就是我想发生的事情：
- 这不是我想发生的情况02-如果第1列比第2列短。第3列填充在第1列下，但它从第2列结束处开始，留下一个空白。
- 这是我想发生的情况02-我希望第3列填充在第1列的正下方
有什么想法吗？
谢谢。
解决方法
您好，感谢您在Stackoverflow上的提问，Bootstrap提供了您想做的事情。但这不能仅使用col-md-6类来实现。
因此，Bootstrap为此提供了一个组件，在Bootstrap纪录片中也介绍了类似的内容。可以在这里找到：https://getbootstrap.com/docs/4.5/components/card/#card-columns
它叫石工。也可以通过Flexbox和Javascript插件来实现。
Flexbox：https://w3bits.com/flexbox-masonry/
JavaScript石工：https://masonry.desandro.com/
希望这能完成您的工作。