Saltar al contenido

Bootstrap col-md-offset- * no funciona

Solución:

Funciona en bootstrap 4, hubo algunos cambios en la documentación. No necesitamos el prefijo col-, solo offset-md-3 p.ej

<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>

Aquí doc.

No recomendaría utilizar el sistema Grid en este caso, sino simplemente agregar un mayor relleno para cada <h2>. Dicho esto, la forma en que lo lograría usando col-*-offset-* sería el siguiente:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

Básicamente, la primera línea debe abarcar toda la fila (por lo tanto, -12). La segunda línea debe estar compensada por 1 columna, por lo que debe compensar por 1 y darle un ancho total de 11 columnas (11 + 1 = 12) y así sucesivamente. Su compensación es siempre suficiente para garantizar que el recuento total de columnas sea igual a 12.

Cambiando col-md-offset-* para offset-md-* trabajó para mi

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *