Come posso ottenere una colonna Bootstrap su più righe?

158

Sto cercando di capire come fare la griglia seguente con Bootstrap.

Non sono sicuro di come creerei la casella (numero 1) che si estende su due righe. Le caselle vengono generate a livello di codice nell'ordine in cui sono disposte. La casella 1 è un messaggio di benvenuto.

inserisci qui la descrizione dell'immagine

Qualche idea sul modo migliore per andare con questo?

css  twitter-bootstrap 
— James Jeffery
fonte
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , puoi nidificare Bootstrap gridsystem.
— TheHippo
1
Quindi creare 2 righe, anziché 3, annidando le 2 righe all'interno della prima riga? Ciò potrebbe essere problematico quando le caselle vengono generate in modo programmatico.
— James Jeffery,
1
Non hai idea se funzionerebbe, ma aggiungendo la pull-leftclasse a tutte le caselle funzionerebbe? non renderà la casella 1 della stessa altezza di 2 + 4, ma dovrebbe consentirgli di funzionare quando si imposta l'altezza.
— Hailwood,
Hailwood, mettilo come risposta se puoi, altrimenti incollerò il mio codice. Ha funzionato ... almeno su Chrome. È necessario testarlo in altri browser.
— James Jeffery,
@Hailwood infatti, non è necessaria alcuna trazione a sinistra. È sufficiente impostare un'altezza sul primo elemento.
— James Jeffery,

Risposte:

164

Per Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Espandi frammento

Per Bootstrap 2:

Mostra snippet di codice

Guarda la demo su JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

— Mastergalen
fonte
Come faresti le caselle quattro e cinque a riempire l'altezza della riga man mano che la casella 1 cresce?
— Imran NZ
2
— Mastergalen,
Questo esempio non funziona del tutto, il bordo inferiore della prima colonna è leggermente disallineato con il resto.
— JackKalish,
Questa è un'ottima risposta, ma cosa succederebbe se la casella 5 dovesse estendersi anche alla riga 3, e ancora di più, in modo dinamico?
— Misha'el,
@ Misha'el È abbastanza semplice, fai quello che ha fatto per la casella 1 e applicalo alla casella 3/5. Dovrebbero esserci 3 colonne di uguali dimensioni, quella esterna conterrebbe solo 1 riga, quella interna due righe.
— Nathan Williams,
17

Come suggeriscono i commenti, la soluzione è utilizzare span / righe nidificati.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
— disrvptor
fonte
1

L'esempio seguente sembrava funzionare. Basta impostare un'altezza sul primo elemento

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Tuttavia, non posso fare a meno di pensare che sia l'uso sbagliato di una riga.

— James Jeffery
fonte
1

Credo che alla parte relativa a come estendere le righe sia stata data una risposta esaustiva (ovvero nidificando le righe), ma ho anche riscontrato il problema delle mie righe nidificate che non riempivano il loro contenitore. Mentre flexbox e margini negativi sono un'opzione, una soluzione molto più semplice consiste nell'utilizzare la h-50classe predefinita nelle rowcaselle contenenti 2, 3, 4 e 5.

Nota: sto usando Bootstrap-4, volevo solo condividere perché ho riscontrato lo stesso problema e ho trovato questa soluzione più elegante :)

— Shareef Hadid
fonte
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
— Ps Naidu
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.