Windows版Safari中Bootstrap 4 row包裹col类布局异常问题

我之前也碰到过Windows版Safari对Bootstrap栅格布局的兼容坑，你尝试的伪元素隐藏没生效，大概率是没触碰到浏览器兼容性的核心问题，给你几个可行的解决方案：

方法一：强制兼容Flex布局属性 #

Windows版Safari的WebKit内核对标准Flex属性的支持有小瑕疵，加上-webkit前缀并明确列的宽度比例就能解决：

.row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.row:before, .row:after {
  content: none !important; /* 彻底清除伪元素，比display:none更彻底 */
}
.col-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.333333%;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

这个方案直接给row和col-4加上了全前缀的Flex属性，确保Windows Safari能正确识别栅格的布局规则，不会把三列挤成单列。

方法二：重置容器与栅格的内外边距 #

有时候Windows Safari会忽略Bootstrap默认的边距设置，导致布局计算错误，手动重置这些属性试试：

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-4 {
  padding-right: 15px;
  padding-left: 15px;
}

把这些样式加到你的自定义CSS里，和方法一配合使用效果更好。

方法三：升级Bootstrap版本 #

如果你用的是比较旧的Bootstrap版本，建议升级到最新稳定版——旧版本对Windows Safari的兼容性处理确实不够完善，新版本修复了不少这类浏览器特定的布局bug。

最后提醒下：修改完样式后记得清除Windows Safari的缓存，有时候旧的缓存会让新样式不生效哦~

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