Comment utiliser les classes d'utilitaires d'espacement sur Bootstrap 4
Dans ce l'article j'ai vu Bootstrap 4 Espacement des Classes utilitaires, et il utilise m-b-lg
dans className
.
<div class="row">
<div class="col-sm-6 m-b-lg">
<!-- column-small-50%, margin-bottom-large -->
</div>
</div>
Mais quand je l'utilise sur meteorjs avec réagissent rien ne se passe. Ai-je raté quelque chose ou manquant d'un plugin?
<div className="container-fluid">
<div className="col-xs-6 col-xs-offset-3 m-t-lg">
<h1 className="text-xs-center"> Login </h1>
<form>
<div className="form-group">
<input type="email" className="form-control" id="inputEmail" placeholder="Email"/>
</div>
<div className="form-group">
<input type="password" className="form-control" id="inputPassword" placeholder="Password"/>
<p className="text-xs-center"><a href="/signup"> Forgot your email or password?</a></p>
</div>
<div className="form-group">
<button className="btn btn-primary btn-block" type="submit"> Login </button>
<p className="text-xs-center"> New to Arcademy? <a href="/signup"> Sign up now.</a></p>
</div>
</form>
</div>
</div>
source d'informationauteur phongyewtong | 2016-02-12
Vous devez vous connecter pour publier un commentaire.
Reportez-vous à la L'espacement (Bootstrap v4 alpha) de la documentation.
Les classes sont nommées en utilisant le format:
{property}-{sides}-{size}
Donc utiliser
m-t-3
au lieu dem-t-lg
.Mise À Jour 2018 Bootstrap 4
Le Bootstrap 4 l'espacement des utils ont changé depuis l'origine de la réponse (pour v4 alpha). Maintenant, la syntaxe est simple:
Exemples..
mb-2
= marge en bas 2 unités d'espacementm-0
= pas de margespt-3
= padding top 3 unités d'espacementp-1
= rembourrage de tous les côtés 1 unité d'espacementIl y a maintenant 6 tailles (0-6), qui représentent une partie de la norme
.5rem
entretoise unité. En outre, de l'axe des x (gauche/droite) et axe des y (haut/bas) utils ont été ajoutés:my-2
= marge en haut & bas 2 unités d'espacementmx-0
= pas de marges à gauche & à droitepx-3
= rembourrage gauche & à droite 3 unités d'espacementEt, de l'espacement utils sont maintenant sensibles. Le plus petit
xs
point d'arrêt est implicite lorsque aucun point d'arrêt est utilisé.mt-md-2
= margin top 2 unités d'espacement, surmd
(et plus)py-sm-0
= pas de rembourrage haut & en bas, sursm
(et plus)Bootstrap 4 Espacement Utils Démo
Connexes: Bootstrap 4 espacement bug?
Fondamentalement, de son ne fonctionne qu'à partir de 0 à 3. m-t-0, m-t-1, m-t-2 ou m-t-3