web-dev-qa-db-fra.com

Comment utiliser les classes d'utilitaires d'espacement sur Bootstrap 4

Dans ce article j'ai vu Bootstrap 4 classes utilitaires d'espacement, 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 des météores avec réagir, rien ne se passe. Suis-je en train de manquer quelque chose ou 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>
javascripthtmlcssmeteorbootstrap-4
18
phongyewtong

Reportez-vous à la documentation Spacing (Bootstrap v4 alpha).

Les classes sont nommées au format: {property}-{sides}-{size}

Où la taille est l'une de: * 0 - pour les classes qui éliminent le margin ou padding en le définissant sur 0 * 1 - (par défaut) pour les classes qui définissent la marge ou le remplissage sur $spacer-xou $spacer-y * 2 - (par défaut) pour les classes qui définissent la marge ou le remplissage sur $spacer-x * 1.5 ou $spacer-y * 1.5 * 3 - (par défaut) pour les classes qui définissent la marge ou le remplissage sur $spacer-x * 3 ou $spacer-y * 3.

Utilisez donc m-t-3 au lieu de m-t-lg.

8
Bass Jobsen

Mise à jour 2018 Bootstrap 4

Le Bootstrap 4 les utils d'espacement ont changé depuis la réponse d'origine (pour alpha v4). Maintenant la syntaxe est simplement:

  • marges: m {côtés} - {taille}
  • rembourrage: p {côtés} - {taille}

Exemples ..

mb-2 = marge inférieure 2 unités d'espacement
m-0 = pas de marges
pt-3 = rembourrage des 3 premières unités d'espacement
p-1 = rembourrage tous les côtés 1 unité d'espacement

Il existe maintenant 6 tailles (0-6) qui représentent une partie de la norme .5rem entretoise. De plus, axe x (gauche/droite) et axe y (haut/bas) des utils ont été ajoutés:

my-2 = marge supérieure et inférieure 2 unités d'espacement
mx-0 = aucune marge gauche et droite
px-3 = rembourrage gauche et droit 3 unités d'espacement

Et, les utils d'espacement sont désormais réactifs. Le plus petit point d'arrêt xs est implicite quand aucun point d'arrêt n'est utilisé.

  • marges: m {côtés} - {point d'arrêt} - {taille}
  • remplissage: p {côtés} - {point d'arrêt} - {taille}

mt-md-2 = marge des 2 premières unités d'espacement, sur md (et plus)
py-sm-0 = pas de rembourrage en haut et en bas, sur sm (et plus)

Démonstration de Bootstrap 4 Spacing Utils

Connexes: bogue d'espacement Bootstrap 4?

59
Zim

Fondamentalement, cela ne fonctionne que de 0 à 3. m-t-0, m-t-1, m-t-2 ou m-t-3

5
phongyewtong