Colonne della griglia di bootstrap che si sovrappongono l'una con l'altra

Question

Ho un problema con il layout di griglia di Bootstrap e la sovrapposizione di colonne al suo interno. Non sono sicuro di quale sia il problema, qualsiasi consiglio sarebbe più apprezzato, grazie.

<div class="container">  

    <div class="row"> 
     <div class="col-md-6"> 
      <img src="content/one.png"> 
     </div> 

     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/two.png"></div> 
       <div class="col-md-6"><img src="content/three.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/four.png"></div> 
       <div class="col-md-6"><img src="content/five.png"></div> 
      </div> 
     </div> 

     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-3"><img src="content/six.png"></div> 
       <div class="col-md-9"><img src="content/seven.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/eight.png"></div> 
       <div class="col-md-6"><img src="content/nine.png"></div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <img src="content/ten.png"> 
     </div> 
    </div> 

</div> 

Schermata della griglia - http://i.stack.imgur.com/a3YBr.jpg

Answer 1

la sintassi griglia non è corretto: il vostro primo div riga ha col-md-6, col-MD-6, col-md-9 e col-MD- 3 come bambini. sistema di rete di bootstrap ha 12 colonne, non 24.

magari provare qualcosa di simile (avvolto col-md-9 e col-md-3 in un nuovo div fila):

<div class="container"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <img src="content/one.png"> 
     </div> 

     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/two.png"></div> 
       <div class="col-md-6"><img src="content/three.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/four.png"></div> 
       <div class="col-md-6"><img src="content/five.png"></div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-3"><img src="content/six.png"></div> 
       <div class="col-md-9"><img src="content/seven.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/eight.png"></div> 
       <div class="col-md-6"><img src="content/nine.png"></div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <img src="content/ten.png"> 
     </div> 
    </div> 

</div> 

Answer 2

ho usato la griglia la sintassi su un bootply chiaro, ha rimosso le immagini e sembra funzionare correttamente. Non hai fatto jsfiddle o bootply, quindi non è possibile aiutarti ulteriormente senza di esso. Ecco cosa la griglia sembra solo con il testo:

Bootply example

Prova ad aggiungere img class-rispondente a tutte le immagini all'interno di colonne per impedire loro di traboccante colonne in cui si trovano

Answer 3

Se stai cercando di. realizzare una griglia di 16x16, i tuoi larghezza delle colonne nidificate non sono giuste:

Inizia cercando in questa sezione:

<div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-3"><img src="content/six.png"></div> 
      <div class="col-md-9"><img src="content/seven.png"></div> 
     </div> 

Stai annidando una colonna 1/4 (3/12) in una colonna 3/4 (9/12). Per capire la larghezza finale della colonna, moltiplicale e ottieni 3/16. Vuoi davvero una colonna 1/4 (4/16). Per risolvere questo problema, è necessario dividere questa sezione (3/4) in tre parti, invece di quarti (4/12 = 1/3 e 8/12 = 2/3):

<div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-4"><img src="content/six.png"></div> 
      <div class="col-md-8"><img src="content/seven.png"></div> 
     </div> 

Per rendere la questione più ovvio, aggiungi un colore di sfondo alla cella contenente seven.png. Vedresti che il colore riempie lo spazio vuoto in modo che la cella sia effettivamente lì. L'immagine è troppo stretta per renderla evidente.

La stessa correzione è necessaria per la metà inferiore di questa sezione:

 <div class="row"> 
      <div class="col-md-6"><img src="content/eight.png"></div> 
      <div class="col-md-6"><img src="content/nine.png"></div> 
     </div> 
    </div> 

Ora si sta prendendo una colonna 3/4 e la divisione in in mezzo in modo (moltiplicando ancora una volta) che si sta creando una colonna 3/8 (6/16) a sinistra dove vuoi 1/2 (8/16th) e una 3/8 (6/16) colonna a destra dove vuoi 1/4 (4/16ths) e un altro. Anche in questo caso, la correzione è quello di dividere la bilancia in tre parti:

 <div class="row"> 
      <div class="col-md-8"><img src="content/eight.png"></div> 
      <div class="col-md-4"><img src="content/nine.png"></div> 
     </div> 
    </div> 

E ancora se si mette un colore di sfondo dietro nine.png, vedrai che lo fa riempire gli spazi.