Bootstrap列高度问题：如何为栅格列设置height AUTO？

从你提供的当前效果和期望效果对比图来看，需要让同一行的栅格列高度统一，以下是几种实用解决办法：

方法1：Bootstrap 4+ 内置类快速解决 #

Bootstrap 4及以上版本默认基于Flexbox布局，只需给每个col-lg-3添加h-100类，就能让列高度自动撑满所在行的最大高度：

<div class="row">
    <div class="col-lg-3 h-100">
        Content
        Content
        Content
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
        Content
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
        Content
        Content
        Content
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
    </div>
    <div class="col-lg-3 h-100">
        Content
        Content
        Content
    </div>
</div>

如果列内部还有嵌套容器（比如卡片组件），记得给内部容器也加上h-100，保证整体高度统一。

方法2：自定义Flex样式适配旧版Bootstrap #

若使用Bootstrap 3及更早版本，可通过自定义CSS开启Flex布局实现等高：

.row.equal-height {
    display: flex;
    flex-wrap: wrap;
}
.row.equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

然后给外层row添加equal-height类即可：

<div class="row equal-height">
    <!-- 你的列内容 -->
</div>

方法3：伪元素兼容旧浏览器 #

如果需要兼容不支持Flexbox的老浏览器，可用负边距+内边距的技巧模拟等高：

.row.equal-height {
    overflow: hidden;
}
.row.equal-height > [class*='col-'] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

同样给row添加equal-height类就能生效。

内容的提问来源于stack exchange，提问作者Abhijeet Patil