html - not - Bootstrap col-md-offset-*no funciona

col xl offset

Question

Estoy tratando de agregar la clase de compensación Bootstrap en mi código para lograr una alineación diagonal como esta:

Pero no sé qué compensación debo usar. He intentado un par de compensaciones para lograr esto, pero no uso. El texto cubre todo el jumbotron. Aquí está mi código

HTML:

<div class="jumbotron">
<div class="container">
<div class="row">
<div>
<h2 class="col-md-4 col-md-offset-4">Browse.</h2>
<h2 class="col-md-4 col-md-offset-4">create.</h2>
<h2 class="col-md-4 col-md-offset-4">share.</h2>
</div>
</div>
</div>
</div>

CSS:

.jumbotron {
height: 500px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: cover;
background-position: center;
}
.jumbotron h2 {
color: white;
font-size: 60px;
}
.jumbotron h2:first-child {
margin: 120px 0 0;
}

Por favor guíame. Gracias de antemano.

Answer 1

Donde esta el problema

En su HTML, todos los h2 tienen el mismo conjunto de 4 columnas, por lo que no hacen una diagonal.

Como arreglarlo

Una row tiene 12 columnas, por lo que deberíamos poner cada h2 en su propia row . Deberías tener algo como esto:

<div class="jumbotron">
<div class="container">
<div class="row">
<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
</div>
<div class="row">
<h2 class="col-md-4 col-md-offset-2">create.</h2>
</div>
<div class="row">
<h2 class="col-md-4 col-md-offset-3">share.</h2>
</div>
</div>
</div>

Una alternativa es hacer que cada ancho h2 más la suma de desplazamiento 12 columnas, para que cada una se ajuste automáticamente en una nueva línea.

<div class="jumbotron">
<div class="container">
<div class="row">
<h2 class="col-md-11 col-md-offset-1">Browse.</h2>
<h2 class="col-md-10 col-md-offset-2">create.</h2>
<h2 class="col-md-9 col-md-offset-3">share.</h2>
</div>
</div>
</div>

Answer 2

Cambiar col-md-offset-* para offset-md-* funcionó para mí

Answer 3

Debiera ser :

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>

Answer 4

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

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

// aquí doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Answer 5

Las clases de compensación de Bootstrap 4 se han eliminado en Beta 1, pero se restaurarán en Beta 2 - referencia de tema

Answer 6

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ías usando col-*-offset-* sería la 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>

Esencialmente, la primera línea debe abarcar toda la fila (por lo tanto, -12). La segunda línea debe estar desplazada por 1 columna, de modo que usted se desplaza por 1 y le da un ancho total de 11 columnas (11 + 1 = 12), etc. Su desplazamiento siempre es suficiente para garantizar que el recuento total de columnas sea igual a 12.

Answer 7

Por ahora, si desea mover una columna sobre solo 4 unidades de columna por ejemplo, sugeriría usar solo un marcador de posición ficticio como en mi ejemplo a continuación

<div class="row">
<div class="col-md-4">Offset 4 column</div>
<div class="col-md-8">
//content
</div>
</div>

Answer 8

Si estás de acuerdo con un pequeño ajuste, sabemos que bootstrap funciona con un ancho de 12

<div class="row">
<div class="col-md-1">
Keep it blank it becomes left offset
</div>
<div class="col-md-5">
</div>
<div class="col-md-5">
</div>
<div class="col-md-1">
Keep it blank it becomes right offset
</div
</div>

Estoy seguro de que hay una mejor manera de hacerlo, pero tenía prisa, así que utilicé este truco.

Answer 9

revisa esto

esto es incorrecto porque bootstrap usando margin-left: **%

.jumbotron h2:first-child {
margin: 120px 0 0;
}