javascript - ¿Cómo uso las clases de utilidad de espaciado en Bootstrap 4?

html css

Question

En este article vi Bootstrap 4 Spacing Utility Classes, y él usa mb-lg en className .

<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

Pero cuando lo uso en meteorjs con react no pasa nada. ¿Me estoy perdiendo algo o me falta un complemento?

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

Answer 1

Básicamente solo funciona de 0 a 3. mt-0, mt-1, mt-2 o mt-3

Answer 2

Consulte la documentación de Spacing (Bootstrap v4 alfa).

Las clases se nombran usando el formato: {property}-{sides}-{size}

Donde el tamaño es uno de: * 0 - para las clases que eliminan el margin o el padding al establecerlo en 0 * 1 - (por defecto) para las clases que establecen el margen o el relleno en $spacer-x o $spacer-y * 2 - (por defecto) para las clases que establecen el margen o el relleno en $spacer-x * 1.5 o $spacer-y * 1.5 * 3 - (por defecto) para las clases que establecen el margen o el relleno en $spacer-x * 3 o $spacer-y * 3 .

Entonces use mt-3 lugar de mt-lg .

Answer 3

Actualización 2018 Bootstrap 4

Las utilidades de here Bootstrap 4 here desde la respuesta original (para v4 alfa). Ahora la sintaxis es simplemente:

• márgenes: m {lados} - {tamaño}
• relleno: p {lados} - {tamaño}

Ejemplos ..

mb-2 = margen inferior 2 unidades de separación
m-0 = sin márgenes
pt-3 = relleno de las 3 unidades de espacio superiores
p-1 = relleno de todos los lados 1 unidad de separación

Ahora hay 6 tamaños (0-6) que representan una parte de la unidad espaciadora estándar .5rem . Además, se han agregado las utilidades del eje x (izquierda / derecha) y del eje y (arriba / abajo):

my-2 = margen superior e inferior 2 unidades de separación
mx-0 = sin márgenes izquierdo y derecho
px-3 = relleno a la izquierda y derecha 3 unidades de espacio

Y, las utilidades de espaciado ahora responden. El punto de ruptura xs más pequeño está implícito cuando no se utiliza ningún punto de ruptura.

• márgenes: m {lados} - {punto de interrupción} - {tamaño}
• relleno: p {lados} - {punto de interrupción} - {tamaño}

mt-md-2 = margen superior 2 unidades de separación, en md (y arriba)
py-sm-0 = sin relleno superior e inferior, en sm (y arriba)

Demostración de Bootstrap 4 Spacing Utils

Relacionado: ¿ Error de espaciado de Bootstrap 4?