Bootstrap 4 Safari Mac 网格问题

Question

Bootstrap4 和 Mac 上的 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>

我正在尝试 'fix codes' 与其他问题不同的方法，但它们并没有解决问题。有什么线索吗？

提前致谢

Answer 1

终于用这个简单的方法解决了问题CSS:

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

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

希望对您有所帮助。

Answer 2

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

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

Bootstrap 4 Safari Mac 网格问题

Bootstrap 4 Safari on Mac Grid issue

safari

bootstrap-4

bootstrap-grid