Righe nidificate con sistema di griglia bootstrap?

196

Voglio 1 immagine più grande con 4 immagini più piccole in un formato 2x2 come questo:

Figura 1 Esempio

Il mio pensiero iniziale era quello di ospitare tutto in una riga. Quindi crea due colonne e, nella seconda colonna, crea due righe e due colonne per creare l'effetto 1x1 e 2x2.

Tuttavia, questo non sembra essere possibile o non lo sto facendo correttamente?

— Greg
fonte

Pubblica l'HTML / CSS che hai provato finora.

— Steve Sanders,

Prova questo: jsfiddle.net/KXje2/9 Ho modificato il mio violino per adattarlo a schermi grandi e extra piccoli.

— BuddhistBeast

Il codice sopra ha funzionato per te? ...

— BuddhistBeast

299

Bootstrap Versione 3.x

Come sempre, leggi l'ottima documentazione di Bootstrap:

3.x Documenti : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Assicurarsi che la riga di livello padre sia all'interno di un .containerelemento. Ogni volta che desideri nidificare le righe, apri un nuovo .rowinterno della colonna.

Ecco un semplice layout su cui lavorare:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap versione 4.0

4.0 Documenti : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Ecco una versione aggiornata per 4.0, ma dovresti davvero leggere l'intera sezione dei documenti sulla griglia in modo da capire come sfruttare questa potente funzionalità

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Demo in Fiddle jsFiddle 3.x | jsFiddle 4.0

Che sarà simile a questo ( con un po 'di stile aggiunto ):

immagine dello schermo

— KyleMit
fonte

mi dispiace dirottare un thread di 1 anno, ma sai come ottenere 0px tra l'immagine e 1 e 3

— alex

@alex, certo - basta impostare margin: 0;sul .mini-boxelemento. Il mio esempio è stato solo quello di aggiungerne uno per chiarezza, ma puoi semplicemente rimuovere del tutto la linea. Ecco una demo

— KyleMit

perché non c'è riga tra col per minibox 2 e col per minibox 3? e cosa succederà se ci fosse?

— pashute,

@pashute, vedi griglia di Bootstrap 3, importa davvero quante colonne ci sono in una riga? . Ogni mini box occupa il 50% dello spazio disponibile (vincolato dalla colonna), quindi due occuperanno la prima riga. Eventuali extra verranno semplicemente inseriti in una nuova riga. È possibile anche associare ognuno di loro in fila, ma non è necessario. Bootstrap si avvolge per impostazione predefinita, quindi non è necessario ingombrare il markup con nuove righe. Se è semanticamente significativo, direi di provarlo. Ma se stai solo visualizzando un elenco di 4 oggetti, tienili nella stessa riga.

— KyleMit

@ user3921890, è un argomento troppo grande per rispondere in una riga di commento. Puoi pubblicare una nuova discussione che spiega cosa stai cercando di fare e almeno un tentativo di farlo, e quindi linkare qui.

— KyleMit,

Aggiungendo a quanto detto da @KyleMit, considera l'utilizzo di:

col-md-* classi per le colonne esterne più grandi
col-xs-* classi per le colonne interne più piccole

Ciò sarà utile quando visualizzi la pagina su schermi di dimensioni diverse.

Su un piccolo schermo, l'avvolgimento di colonne esterne più grandi avverrà quindi mantenendo le colonne interne più piccole, se possibile

— ezzadeen
fonte