Bootstrap 4 Safari для Mac Grid

Существует проблема с Bootstrap 4 и браузером Safari на Mac. При использовании 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>

Я пытаюсь использовать разные "коды исправлений" из других вопросов, но они не решают проблему. Любая подсказка?

Заранее спасибо

Ответ 1

Наконец, решена проблема с этим простым CSS:

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

Кажется, есть некоторый код, скрытый в: before и: after элементы внутри строк. Это вызывает некоторые проблемы в сафари-браузерах.

Надеюсь, что это поможет.

Ответ 2

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

Есть причина для отображения: таблица до и после строки. При использовании display: none строка не будет сохранять свою высоту в зависимости от элементов внутри нее, а высота строки теперь равна 0px, поскольку столбцы внутри плавающие.

Ответ 3

У меня похожая проблема в моем проекте, я использую этот код, но он не работает, и моя проблема не решается

.row: before,.row: after {display: none! важный;}

что мне делать? Пожалуйста, помогите мне