web-dev-qa-db-fra.com

Problème avec Bootstrap 4 Safari sur Mac Grid

Il y a un problème avec Bootstrap 4 et Safari Brower sur Mac . Lorsque vous utilisez des colonnes dans une rangée, elles se brisent et ne fonctionnent pas comme sur Firefox ou Chrome. J'utilise un code simple comme ceci:

<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>

J'essaie différents 'codes correctifs' d'une autre question mais ils ne résolvent pas le problème. Un indice?

Merci d'avance

safaribootstrap-4bootstrap-grid
7
Pau Mompó

Enfin résolu le problème avec ce simple CSS:

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

Il semble qu'il y ait du code caché dans: before et: after des éléments à l'intérieur des lignes. Cela provoque des problèmes dans les navigateurs de safari.

J'espère que ça aide.

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

Il y a une raison pour l'affichage: table avant et après la ligne . En utilisant display: none, la ligne ne conservera pas sa hauteur en fonction des éléments qu'elle contient, et la hauteur de la ligne est désormais 0px car les colonnes qu'elle contient sont flottantes ..

1
Sillo