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