使用Bootstrap和Flexbox实现等高列（Safari浏览器兼容问题）

你给.row设置flex布局实现等高列后，Safari对flex容器的margin处理逻辑与Chrome、Firefox等浏览器不一致，导致换行处外边距消失。以下是几种针对性解决办法：

方案1：仅给Safari单独适配 #

利用CSS特性检测精准定位Safari，只为它添加底部间距，不影响其他浏览器：

/* 仅匹配Safari浏览器 */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .row {
            margin-bottom: 20px;
        }
        /* 页面最后一行的row去掉底部间距，避免多余空白 */
        .row:last-of-type {
            margin-bottom: 0;
        }
    }
}

方案2：用内边距+负margin统一处理 #

这种思路贴合Bootstrap原生网格的设计逻辑，通过列的内边距和row的负margin平衡间距，所有浏览器表现一致：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -20px; /* 负margin抵消列的内边距 */
}

.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px; /* 给列添加底部内边距作为间距 */
}

不管是不是Safari，换行后的间距都能正常显示，不会出现差异。

方案3：伪元素模拟间距 #

给.row添加伪元素生成底部间距，避免直接修改row的margin：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.row::after {
    content: '';
    display: block;
    height: 20px;
    width: 100%;
    order: 999; /* 确保伪元素在所有列之后 */
}

/* 最后一行的row去掉伪元素间距 */
.row:last-of-type::after {
    display: none;
}

这个方案适合不想改动原有margin/padding逻辑的场景，兼容性也不错。

内容的提问来源于stack exchange，提问作者j. marc