Bootstrap 4 l'espacement réactif ne fonctionne pas
J'utilise les classes telles que définies
Applique une marge à un élément en utilisant des points d'arrêt réactifs {propriété} {côtés} - {point d'arrêt} - {taille} m (t, b, r, l, x, y) - (sm, md, lg, xl) - (0, 1, 2, 3, 4, 5)
Ce qui signifie que
<div class="col-12 mb-sm-3"></div>
Devrait produire un div avec une marge inférieure sur les petits appareils, mais ce n'est pas le cas.
J'ai compris ce qui se passe. Le mb-sm-3 n'affecte que la largeur minimale de 576 pixels, donc sur mobile, iphone 6 par exemple, la largeur minimale est inférieure à 576, donc ce que je devais faire était:
<div class="col-12 mb-3 mb-sm-0"></div>
Cela crée une marge inférieure à 3 pour sm en dessous (xs dans le cas), puis sm et au-dessus obtiennent zéro.
Merci de votre aide.
margin-bottom: 1rem!important; ajoute à .mb-sm-3
Vérifiez ça
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-sm-3" style="background:blue;height:20px;"></div>
<div>Space above is the margin of the `mb-sm-3`</div>