Bootstrap-Gitter wird nicht richtig angezeigt

Question

Wie kann ich mein Gitter ohne großen Platz korrekt anzeigen und gut aussehen?

my photo

Mein Code:

<div class="first"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/> 
     </div> 

     <div class="col-md-3"> 
      <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/> 
     </div> 

     <div class="col-md-3"> 
      <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/> 
     </div> 

     <div class="col-md-6"> 
      <img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/> 
     </div> 

     <div class="col-md-3"> 
      <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/> 
     </div> 

     <div class="col-md-3"> 
      <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/> 
     </div> 
    </div> 
</div> 

Vielleicht sollte ich jede JS-Skript oder smthing verwenden? Bitte helfen :)

Answer 1

Sie müssen die float hinzugefügt, um die Spalten löschen (Spalten haben float: left sie standardmäßig angewandt) am Haltepunkt (e) Sie verwenden (992px für col-MD- *) oder Platzieren Sie Ihre Spalten in einzelnen Zeilen, wenn Sie insgesamt 12 Spalten haben.

<div classs=container> 
    <div classs=row> 
    <div classs=col-*-6> 
    <div classs=col-*-6> 
    <div><!-- EQUALS 12 COLUMNS --> 
    <div classs=row> 
    <div classs=col-*-6> 
    <div classs=col-*-3> 
    <div classs=col-*-3> 
    <div><!-- EQUALS 12 COLUMNS --> 
<div> 

Beispiel für die Verwendung Reihen

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 
    </div> 
 

 
</div>

Beispiel Löschen des Float @ 992px selbst während nur eine einzige Zeile für alle Spalten verwendet. Hinweis: Stellen Sie sicher, dass Sie diese Spalten irgendwie angeben, damit andere Bereiche des Rasters nicht anderweitig gestört werden. Das Beispiel verwendet eine generische .item Klasse, um dies zu handhaben, kann aber auf viele Arten erfolgen.

Weitere Informationen finden Sie unter nth-child und clear auf MDN.

@media (min-width: 992px) { 
 
    .item:nth-child(3n+1) { 
 
    clear: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-md-6 item"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-6 item"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-6 item"> 
 
     <img src="http://placehold.it/500x250/000" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/f00" class="img-responsive" /> 
 
    </div> 
 

 
    <div class="col-md-3 item"> 
 
     <img src="http://placehold.it/250x250/ff0" class="img-responsive" /> 
 
    </div> 
 

 
    </div> 
 
</div>