Mac Grid 上的 Bootstrap 4 Safari 问题答案

【问题标题】：Bootstrap 4 Safari on Mac Grid issueMac Grid 上的 Bootstrap 4 Safari 问题
【发布时间】：2018-08-30 09:35:02
【问题描述】：

Mac 上的 Bootstrap 4 和 Safari 浏览器存在问题。在一行内使用 cols 时，它会破坏它，并且不像在 Firefox 或 chrome 上那样工作。我正在使用这样的简单代码：

<div class="row align-items-center">
    <div class="col-sm-12 col-md-3 hidden-xs 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 4 问题：stackoverflow.com/a/65234112/7186739

标签： safari bootstrap-4 bootstrap-grid

【解决方案1】：

.row:before, .row:after {width:0px; height:0px;}

显示有原因：table 前后行。通过使用 display:none，行将不会根据其中的元素保留其高度，并且行高现在为 0px，因为里面的列是浮动的..

【讨论】：

【解决方案2】：

终于用这个简单的CSS解决了这个问题：

.row:before, .row:after {display: none !important;}

似乎在行内的 :before 和 :after 元素中隐藏了一些代码。这会导致 Safari 浏览器出现某种问题。

希望对你有帮助。

【讨论】：

谢谢你，我努力了好几个小时才能让它工作。终于明白了！！
谢谢我一直在努力解决这个问题，.row:after 和 .row:before 应该清除浮动。它的属性与 clearfix 类相同。
这也解决了我在 Bootstrap 3 中遇到的类似问题，谢谢！
有谁知道为什么这适用于移动游猎？似乎是一个巨大的疏忽。
您好，有人知道如何在引导程序版本 3 中修复吗？因为将 display 设置为 none 会破坏任何地方的布局。