Bootstrap-Gitterspalten, die einander überlappen

Question

Ich habe ein Problem mit dem Grid-Layout von Bootstrap und der Überlappung von Spalten darin. Ich bin mir nicht sicher, was das Problem wirklich ist, jeder Rat würde sehr geschätzt werden, danke.

<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> 

Screenshot des Gitters - http://i.stack.imgur.com/a3YBr.jpg

Answer 1

Ihre grid Syntax ist falsch: Ihre erste Reihe div hat col-md-6, col-MD-6, col-md-9 und col-MD- 3 als Kinder. Bootstrap Grid-System hat 12 Spalten, nicht 24.

Vielleicht so etwas wie diese versuchen (gewickelt col-md-9 und col-md-3 in eine neue Zeile div):

<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

ich verwendet, um Ihre Gitter Syntax auf einer klaren bootply, entfernt die Bilder und es scheint zu funktionieren OK. Sie haben weder Jetfiddle noch Bootply gemacht, es ist also nicht möglich ohne Sie weiter zu helfen. Hier ist, was das Raster wie mit nur Text aussieht:

Bootply example

Versuchen Hinzufügen img-responsive Klasse auf alle Bilder in Spalten, um sie daran zu hindern, überquellenden Säulen sind sie in

Answer 3

Wenn Sie versuchen, zu. erreichen ein 16x16 Raster, sind Ihre verschachtelte Spaltenbreiten nicht rechts:

beginnen Sie mit in diesem Abschnitt suchen:

<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> 

Sie verschachteln eine 1/4 Spalte (3/12) in einer 3/4 Spalte (9/12). Um die endgültige Breite der Spalte herauszufinden, multiplizieren Sie sie zusammen und erhalten 3/16. Sie möchten wirklich eine 1/4 (4/16) Spalte. Um dies zu beheben, müssen Sie statt Viertel dieses (3/4) Abschnitt in Drittel aufzuteilen (4/12 = 1/3 und 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> 

Um das Problem zu machen mehr offensichtlich, fügen Sie eine Hintergrundfarbe zu der Zelle hinzu, die seven.png enthält. Sie würden sehen, dass die Farbe den leeren Raum ausfüllen würde, so dass die Zelle tatsächlich da ist. Das Bild ist einfach zu eng, um es deutlich zu machen.

Die gleiche Lösung ist für die untere Hälfte dieses Abschnitts erforderlich:

 <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> 

Jetzt sind Sie eine 3/4 Spalte und Spaltung in in 1/2 so nehmen (Multiplikation wieder) Sie erstellen eine 3/8 (6/16) Spalte auf der linken Seite, wo du 1/2 (8/16) und eine 3/8 (6/16) Spalte auf der rechten Seite haben willst, wo du ein 1/4 (4/16ts) willst und ein anderer. Auch hier ist das Update, das Gleichgewicht in Drittel aufgeteilt:

 <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> 

Und wieder, wenn Sie eine Hintergrundfarbe hinter nine.png setzen, werden Sie sehen, dass es die Leerzeichen füllt.