web-dev-qa-db-ja.com

Bootstrap 4 Macグリッド上のSafariの問題

Bootstrap 4と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>

別の質問とは異なる「修正コード」を試していますが、問題は解決しません。どんな手掛かり？

前もって感謝します

safaribootstrap-4bootstrap-grid
15
Pau Mompó

最後に、この単純なCSSで問題を解決しました。

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

行内の：beforeおよび：after要素にいくつかのコードが隠れているようです。これにより、サファリブラウザーで何らかの問題が発生します。

それが役に立てば幸い。

34
Pau Mompó
.row:before, .row:after {width:0px; height:0px;}

Display：tableの前後の行には理由があります。 display：noneを使用すると、行はその中の要素に応じてその高さを保持しません。また、内部の列がフローティングであるため、行の高さは0pxになりました。

2
Sillo