使用 CSS Clearfixes 在 Bootstrap 中垂直对齐不均匀高度的 Div
目标是垂直对齐 Bootstrap 行中不同高度的 div,而无需使用 Masonry 等外部插件。这是一个 CSS 解决方案:
在提供的 HTML 结构中,每个类别都由具有“menu-category”类的 div 表示。由于每个类别中的项目不同,这些 div 具有不同的高度。为了实现所需的堆叠,我们可以利用 Bootstrap 的可见性类。
具体来说,我们可以添加一个带有可见性修饰符的“clearfix”类,以选择性地清除 div 布局中的浮动。例如,如果您只想在中大屏幕尺寸下清除浮动,则可以使用以下代码:
<div class="clearfix visible-md visible-lg"></div>
同样,如果您只想在小屏幕尺寸下清除浮动,请使用:
<div class="clearfix visible-sm"></div>
通过将这些清除 div 添加到 HTML 结构中的适当位置,您可以防止浮动 div 换行到下一行,迫使它们堆叠垂直。
示例:
通过这种方法,div 高度将根据内容动态调整,确保它们整齐地堆叠在行容器内。
以上是如何使用 CSS Clearfixes 垂直对齐 Bootstrap 行中不均匀高度的 Div?的详细内容。更多信息请关注PHP中文网其他相关文章!