2014-06-05 14 views
5

Sarebbe possibile ottenere la griglia allegata nel bootstrap? Ciascuno dei quadrati sarebbe probabilmente un'immagine ... o forse un testo!Raggiungere una griglia complessa in bootstrap

Ho avuto un tentativo, ma colpire un muro quando si tratta della casella in alto a sinistra, ad esempio che si estende su due righe.

Griglia:

enter image description here

+0

Bene, posso vedere come ottenere questo risultato senza i bootstrap, quindi credo che si possa ottenere con i bootstrap. –

+0

Great @ web-tiki, cosa consiglieresti? Grazie – kingprawn123

+0

Non userei i bootstrap ma questo è molto personale (non lo uso e non mi piace molto), ma come si domanda è "è possibile" io rispondo "sì" come è possibile senza è è possibile con stivali. Se non vuoi usare gli scarponi, posso aiutarti altrimenti non posso. In ogni caso, molte persone qui dovrebbero essere in grado di trovare una soluzione di bootstrap quindi non preoccuparti di questo. –

risposta

10

utilizzare i blocchi annidati ogni volta che è necessario il vostro griglia per estendersi su diverse righe. Qualcosa di simile a questo:

<div class="row"> 
    <div class="col-sm-6"></div> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-6"></div> 
      <div class="col-sm-6"></div> 
     </div>   
     <div class="row"> 
      <div class="col-sm-6"></div> 
      <div class="col-sm-6"></div> 
     </div> 
    </div> 

    <div class="col-sm-8"> 
     <div class="row"> 
      <div class="col-sm-8"></div> 
      <div class="col-sm-4"></div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"></div> 
      <div class="col-sm-8"></div> 
     </div> 
    </div> 
    <div class="col-sm-4"></div> 
</div> 

quindi è possibile impostare l'altezza per i blocchi e la griglia è buona per andare.

+0

Grazie mille @TwiStar, darò questa prova! Per impostare l'altezza dei blocchi, si consiglia di aggiungere un nuovo file .css nella cartella css che si rivolge alla classe 'row'? – kingprawn123

+0

Ti consiglio di avere un foglio di stile separato con le tue classi personalizzate che controllano questo tipo di cose. – Eternal1

+0

Perfetto, mi dispiace per aver fatto tante domande, ma se guardassi la casella in alto a sinistra, ad esempio, avrei messo quella scatola in un div e gli avrei dato una classe personalizzata (esempio) "topleft"? Poiché la griglia è reattiva è possibile rispecchiare la larghezza con un'altezza variabile? Grazie ancora TwiStar. – kingprawn123

Problemi correlati