En este artículo vi Bootstrap 4 Espaciado de Clases de Utilidad, y que él utiliza m-b-lg en className.

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

Pero cuando yo lo uso en meteorjs con reaccionar no pasa nada. Me estoy perdiendo algo o que falta 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>

OriginalEl autor phongyewtong | 2016-02-12

3 Comentarios

  1. 6

    Se refieren a la Espaciado (Bootstrap v4 alfa) documentación.

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

    Donde el tamaño es uno de: * 0 – para las clases que eliminar el margin
    o padding ajustar 0 * 1 – (por defecto) para las clases que
    establecer el margen o de relleno para $spacer-xo $spacer-y * 2 – (por
    valor predeterminado) para las clases que se establezca el margen o de relleno para $spacer-x *
    1.5
    o $spacer-y * 1.5 * 3 – (por defecto) para las clases que se establezca el margen o de relleno para $spacer-x * 3 o $spacer-y * 3.

    Para uso m-t-3 en lugar de m-t-lg.

    Yo uso la m-t-100 nada a cambio. <div className=»container-fluid»> <div className=»col-xs-6 col-xs-offset-3 m-t-100″> <h1 className=»text-xs-center»> inicio de Sesión </h1> </div> </div> @bass jobsen
    usted debe utilizar m-t-1, m-t-2, o m-t-3
    El oficial de Boostrap 4.0 espaciado de la documentación es el aquí (aunque todavía en versión beta en el momento de este comentario).
    Tal vez soy yo, pero la documentación se VE maravillosa y completa. Hasta que intenta utilizar. Bootstrap es fantástico, el esfuerzo de construir y mantener que para todos nosotros es enorme. La documentación fue también un gran esfuerzo, pero algunos fue hecho por alguien que sabe las respuestas y no lo necesita, o por alguien que se está contando lo que la respuesta debe ser, pero no lo entiende. Por ejemplo, en este caso, es la documentación de decirme que añadir CSS para apoyar estos utilties? O me muestra CSS lo que ya está definido? Si usted lee a través de toda la página, los contextos no son claros.

    OriginalEl autor Bass Jobsen

  2. 50

    Actualización De 2018 Bootstrap 4

    El Bootstrap 4 espaciado utils han cambiado ya que la respuesta original (para v4 alfa). Ahora la sintaxis es sencilla:

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

    Ejemplos..

    mb-2 = margen inferior 2 espaciado de las unidades

    m-0 = sin márgenes

    pt-3 = padding top 3 espaciamiento de las unidades

    p-1 = relleno de todos los lados 1 espaciado de la unidad

    Ahora hay 6 tamaños (0-6) que representan una porción de la norma .5rem espaciador de la unidad. Además, eje x (izquierda/derecha) y eje (superior/inferior) utils ha añadido:

    my-2 = margen superior & la parte inferior 2 espaciado de las unidades

    mx-0 = sin márgenes izquierdo & a la derecha

    px-3 = relleno izquierdo & derecho 3 espaciamiento de las unidades

    Y, el espacio utils son ahora sensibles. El más pequeño xs punto de interrupción es implícita cuando no hay punto de interrupción se utiliza.

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

    mt-md-2 = margen superior de 2 espaciado de las unidades, en md (y)

    py-sm-0 = sin relleno superior & parte inferior, en la sm (y)

    Bootstrap 4 Espaciado Utils Demo


    Relacionados con: Bootstrap 4 espaciado de error?

    Yo no veo nada en la documentación de mencionar el uso de varias clases. Por ejemplo, p-3 pb-1 parece ser sólo el reconocimiento de la p3 espaciado a pesar de la pb-1 clase viene después de que el p-3 es declarada. Es esta supuesta a ser compatibles?
    Ver esta respuesta: stackoverflow.com/questions/44025566/bootstrap-4-spacing-bug/…

    OriginalEl autor Zim

  3. 4

    Básicamente su sólo funciona a partir de la 0 a la 3. m-t-0, m-t-1, m-t-2 o m-t-3

    OriginalEl autor phongyewtong

Dejar respuesta

Please enter your comment!
Please enter your name here