Bootstrap 4 Mac版Safari浏览器栅格布局异常问题求助

我之前在项目里也踩过Mac Safari和Bootstrap 4的这个flex布局坑，结合实际调试经验，给你几个针对性的解决办法：

• 替换废弃的hidden-xs类
  Bootstrap 4已经彻底弃用了Bootstrap 3的hidden-*系列类，改用d-*响应式显示类。你代码里的hidden-xs应该换成d-none d-sm-block——这个类的作用是在xs（超小屏）隐藏，在sm及以上屏幕显示，和原来的hidden-xs效果一致。废弃类在Safari里可能会触发奇怪的布局解析问题。

• 修复Safari的Flex对齐兼容性
  Safari（尤其是旧版本）对标准Flex属性的支持不如Chrome/Firefox完善，align-items-center的对齐效果可能会失效。可以给你的row添加带前缀的兼容样式：

  .row.align-items-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  

  强制Safari识别Flex布局的对齐和换行规则，亲测能解决大部分错位问题。

• 统一列的高度基准
  有时候列内元素的默认边距（比如h3的上下margin）会导致Safari的高度计算偏差，你可以给列或者内部元素重置边距，同时添加最小高度确保布局稳定：

  .align_left h3 {
    margin: 0; /* 重置h3的默认边距 */
  }
  .col-md-3 {
    min-height: 1px; /* 强制Safari识别列的高度容器 */
  }
  

• 使用修改后的完整测试代码
  把上面的调整整合后，你的代码应该改成这样：

  <div class="row align-items-center">
    <div class="col-sm-12 col-md-3 d-none d-sm-block align_left"><h3>TEXT</h3></div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
  </div>
  

如果还是有问题，建议检查项目里有没有自定义样式覆盖了Bootstrap的box-sizing: border-box（这个属性是Bootstrap布局的核心），或者测试一下Safari的版本——如果是12.x及以下的旧版本，可能需要额外的Flex前缀兼容。

内容的提问来源于stack exchange，提问作者Pau Mompó