Twiter Bootstrap Domanda: Data l'immagine qui sotto, come posso contrassegnare i 3 contenitori rossi in modo che siano fluidi e reattivi? Posso definire un contenitore/riga all'interno di un span*? Non sei sicuro di come affrontare un simile layout.Bootstrap su Twitter: righe annidate?
Hai provato questo ordine di nidificazione:
Certo, puoi annidare le righe all'interno di altre luci così profonde.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="span3"></div>
</div>
</div>
che dovrebbe funzionare per i 3 contenitori all'interno della riga 9.
Il [docs] (http://twitter.github.com/bootstrap/scaffolding.html) consiglia di avvolgere l'interno '.span4's in un' .row-fluid'. L'hai omesso intenzionalmente perché non è necessario in pratica o è solo una svista? –
hmm, non dovrebbe essere span3 ??? – alex
@alex Le griglie dei fluidi funzionano in modo diverso: ogni livello annidato di colonne dovrebbe aggiungere fino a 12 colonne. Questo perché la griglia fluida utilizza PERCENTAGGI, non i pixel, per impostare le larghezze. Quindi, l'esempio sopra è perfetto, perché è la percentuale che puoi inserire 12 all'interno di 9. Penso che la documentazione di bootstrap su questo argomento sia scarsa. – Labanino
È possibile annidare una riga all'interno di una riga, ma è necessario accertarsi che il markup sia corretto.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
</div>
<div class="span3">...</div>
</div>
</div>
Seguire il collegamento per visualizzare l'esempio di lavoro con questo. Prova a spostare la barra verticale tra HTML e visualizzazione dei risultati e vedrai il layout reattivo lavorare lì e là. Three Responsive columns with Twitter Bootstrap
I colloqui doc su * Fluid Nesting * nella [Fluid sezione Grid System] (http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem) – Sherbrow
Upvote per il diagramma ordinato: o) – maasha
@ Sherbrow, sono finito qui perché il documento non fornisce esempi di nidificazione complessa con righe e non è del tutto chiaro per questo caso d'uso. – Renee