引導電網不正確顯示

Question

我怎麼能正確顯示我的網格，而不巨大的空間，又好看？

my photo

我的代碼：

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

也許我應該使用任何JS腳本或smthing？請幫助:)

Answer 1

你需要清除float添加到列（列已默認應用到他們float: left）在斷點處（）你正在使用（992px用於COL-MD-*）或如果總共有12列，請將您的列放在單獨的行中。

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

示例使用行

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

例清除浮動@ 992px自己，而只使用一個單獨的行，你的所有列。 注意：確保以某種方式指定這些列，以便這不會干擾其它地方電網的另一部分;使用通用.item類的實例來處理這一點，但可以通過多種方式來完成。

更多信息，請參見nth-child和clear上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>