CSS Bootstrap 网格 - 环绕 Div 不是从其上方 Div 的底部开始
CSS Bootstrap Grid - Wrapping Divs are not starting at the bottom of the Div above it
我遇到了一个以前从未遇到过的问题。我搜索了答案，但很难找到合适的搜索词来找到解决方案。
我有一排 3 divs。使用 Bootstrap，所有三个都有 class="col-md-6"..ie divs 占据行的 50% 宽度。它们中的内容是动态的，因此每个 div 可能在也可能不在任何给定视图中。我想要实现的是让它们以这样的方式包装，如果所有三个都有内容，则两个将位于顶部“行”，第三个位于下方。我有那部分工作。
每个 Div 中的内容都是动态的，这意味着有时给定的 Div 可能比另一个更长。
事情是这样的：
- 这就是我想要在场景 01 中发生的情况 - 如果 Col #1 比 Col #2 长，Col #3 直接填充在 Col #2 下方。这就是我想要发生的事情：
- 这不是我想要发生的场景 02 - 如果 Col #1 比 Col #2 短。 Col #3 填充在 Col #1 之下，但它从 Col #2 结束的地方开始，留下空隙。
- 这就是我希望场景 02 发生的情况 - 我希望 Col #3 直接填充在 Col #1 下面
有什么想法吗？
提前致谢。
您好，感谢您在 Whosebug 上提出问题，您尝试做的事情可用于 Bootstrap。但是仅仅使用 col-md-6 类.
是无法实现的
所以 Bootstrap 有一个组件，Bootstrap 纪录片中描述了类似的内容。可以在这里找到：https://getbootstrap.com/docs/4.5/components/card/#card-columns
它叫石工。这也可以通过 Flexbox 和 Javascript 插件来实现。
弹性框：https://w3bits.com/flexbox-masonry/
Javascript 砌体：https://masonry.desandro.com/
希望这对你有用。
我遇到了一个以前从未遇到过的问题。我搜索了答案，但很难找到合适的搜索词来找到解决方案。
我有一排 3 divs。使用 Bootstrap，所有三个都有 class="col-md-6"..ie divs 占据行的 50% 宽度。它们中的内容是动态的，因此每个 div 可能在也可能不在任何给定视图中。我想要实现的是让它们以这样的方式包装，如果所有三个都有内容，则两个将位于顶部“行”，第三个位于下方。我有那部分工作。
每个 Div 中的内容都是动态的，这意味着有时给定的 Div 可能比另一个更长。
事情是这样的：
- 这就是我想要在场景 01 中发生的情况 - 如果 Col #1 比 Col #2 长，Col #3 直接填充在 Col #2 下方。这就是我想要发生的事情：
- 这不是我想要发生的场景 02 - 如果 Col #1 比 Col #2 短。 Col #3 填充在 Col #1 之下，但它从 Col #2 结束的地方开始，留下空隙。
- 这就是我希望场景 02 发生的情况 - 我希望 Col #3 直接填充在 Col #1 下面
有什么想法吗？
提前致谢。
您好，感谢您在 Whosebug 上提出问题，您尝试做的事情可用于 Bootstrap。但是仅仅使用 col-md-6 类.
是无法实现的所以 Bootstrap 有一个组件，Bootstrap 纪录片中描述了类似的内容。可以在这里找到：https://getbootstrap.com/docs/4.5/components/card/#card-columns
它叫石工。这也可以通过 Flexbox 和 Javascript 插件来实现。
弹性框：https://w3bits.com/flexbox-masonry/
Javascript 砌体：https://masonry.desandro.com/
希望这对你有用。