Bootstrap 3.3.6 Limiti della griglia che non forniscono una struttura rigida

Question

Sto tentando di familiarizzare con Bootstrap e Grid. Sto tentando di creare il seguente schema macro:

=================================================== 
| PageTitle    |________________________| 
|________________________| +1 |________| img| img| 
| Make a choice.   |_____|________|____|____| 
|      |      | 
=================================================== 

L'elemento principale è un jumbotron, all'interno del quale c'è una fila. Ho quindi diviso la riga in due elementi <div> di class="col-xs-12" ciascuno (desidero che il pannello sinistro rimanga sopra la destra sul cellulare).

Il pannello di sinistra viene ulteriormente suddiviso in due righe con contenuto di testo.

Il pannello di destra contiene una riga, divisa in due sezioni ancora una volta. Le sezioni sinistra e destra sono entrambe class="col-xs-12 col-sm-3". Questo per garantire che su schermi più piccoli si adattino l'uno sull'altro e riempiano l'intero spazio orizzontale. Una sottostruttura di righe e ulteriori colonne divide lo spazio come mostrato.

Ecco il mio codice finora: Link

Come si sarà in grado di vedere, il layout si comporta come mi aspetterei in formato XS (sotto 768px). Tuttavia, con le dimensioni maggiori, le righe e le colonne nel pannello di destra si sovrappongono e le immagini sono scomparse.

Qualsiasi indicazione per capire perché la rete non funziona come mi aspetterei (vale a dire come una tabella che riflette in modo intelligente a diverse dimensioni dello schermo), sarebbe apprezzata!

Answer 1

La struttura della griglia sul pannello destro del piccolo dispositivo sembra essere sbagliata.

Nello snippet di codice del JSFiddle. Sul numero di linea 17 and 32, cambiare a class="col-xs-6 col-sm-6".

Ciò renderebbe le immagini visualizzate di nuovo.

Aggiornato:

Naturalmente è possibile, non vi resta che cambiare l'approccio vostra presa per costruire, e qualsiasi struttura è possibile. Controllare this Fiddle. Mostra le colonne sotto righe e righe sotto la struttura delle colonne in un modo semplice da capire.

Nel tuo caso, ciò che devi fare è al livello più alto dividere la struttura in 4 colonne e fare quello che vuoi all'interno di ogni colonna.

modo più semplice per avvicinarsi e comprendere qualsiasi struttura complessa:

• innanzitutto determinare quante colonne la struttura ha bisogno. Il massimo deve essere sempre diviso tenendo in considerazione le colonne.

• Dopo aver determinato le colonne, considerare ogni colonna come una pagina a larghezza intera (ignorando le altre colonne per il tempo) e dividere nuovamente e così via.

semplice :-)

Answer 2

Mi scuso se la domanda mi è stato chiesto non era chiaro in alcun modo, ma qui è quello che stavo cercando di fare.Speriamo che, vedendo la risposta side-by-side con la domanda aiuterà a chiarire:

HTML

<div class="row"> 
    <div class="col-xs-12 col-sm-5"> 
    <h2> 
     PageTitle. 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-1 text-center"> 
    <h2> 
     +1 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-2"> 
    <div class="statsbox"> 
     <div class="statsbaryes"> 
     </div> 
     <div class="statsbarno"> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
</div> 

CSS

.statsbaryes { 
    height: 30px; 
    background-color: green; 
    width: 20%; 
} 
.statsbarno { 
    height: 30px; 
    background-color: red; 
    width: 80%; 
} 
.statsbox { 
    height: 66px; 
    right: 0px; 
    width: 100%; 
    border: 3px solid grey; 
} 

https://jsfiddle.net/z9jvnahd/

Come accennato nel mio commento alla risposta di Nikhil, il problema è venuto dal mio fraintendimento che potevo avere tanti strati di suddivisioni di righe/colonne come volevo aiutare a strutturare il layout, purché ci fossero 12 colonne per ogni riga logica sullo schermo. Tuttavia, questo non è il caso, e sembra che le colonne debbano essere raggruppate tutte insieme in una riga di primo livello per comportarsi correttamente, a partire dalla mia sperimentazione.