引导电网不正确显示

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>