Bootstrap col-md-Offset- * non funziona

Question

Sto cercando di aggiungere Bootstrap compensare classe nel mio codice per ottenere un allineamento diagonale in questo modo:

Ma io non so cosa dovrebbe compensato Io uso. Ho provato paio di compensazioni per raggiungere questo obiettivo, ma non use.Text copre tutta jumbotron.Here è il mio codice

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

Si prega di guidarmi. Grazie in anticipo.

Answer 1

io non consiglierei utilizzando il sistema di griglia in questo caso, per quanto semplice aggiungendo un'imbottitura maggiore per ogni <h2>. Detto questo, il modo in cui si sarebbe ottenere ciò utilizzando col-*-offset-* potrebbe essere il seguente:

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

Essenzialmente la prima linea deve coprire l'intera riga (così -12). La seconda riga deve essere sfalsata di 1 colonna, quindi offset di 1 e assegnare una larghezza totale di 11 colonne (11 + 1 = 12) e così via. Il tuo offset è sempre sufficiente a garantire che il conteggio totale della colonna è pari a 12.

Answer 2

dovrebbe essere:

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

dov'è il problema

nel tuo html tutti h2 s hanno lo stesso off-set di 4 colonne, in modo da non fare una diagonale.

Come risolvere il problema

Un row ha 12 colonne, quindi dovremmo mettere ogni h2 in esso la propria row. Si dovrebbe avere qualcosa di simile:

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

Un'alternativa è quella di rendere ogni larghezza h2 più offset somma 12 colonne, così ognuno avvolge automaticamente in una nuova linea.

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

controllo questo bootply

questo è sbagliato perché bootstrap usando margin-left: **%

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

Answer 5

Funziona in bootstrap 4, c'era alcuni cambiamenti nella documentation.We non hanno bisogno del prefisso col-, appena offset md-3 esempio

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

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

Answer 6

Modifica col-md-offset-*-offset-md-* funzionato per me

Answer 7

Bootstrap 4 compensato classi sono stati rimossi in Beta 1, ma sarà ripristinato in Beta 2 - topic reference

Answer 8

Per ora, se si desidera spostare una colonna su solo 4 unità di colonna, ad esempio, suggerirei di utilizzare solo un segnaposto fittizio come in m y esempio sotto

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