bootstrap col-sm-6每行3个项目

Question

我有一个容器有一排，里面有六个组合物品。 这一个小屏幕我得到以下结果上使用时的代码：

• 第一行：2个图像
• 第二行：在右侧1个图像
• 第三行：2个图像
• 第四line：1左侧的图像

任何人都有线索？对我来说就像一个错误。

<div class="container"> 

       <div class="row"> 

        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img1.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 

        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img2.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 

        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img3.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 


        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img4.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 

        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img1.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 


        <div class="col-md-4 col-sm-6 col-xs-12"> 
         <div class="portfolio-thumb"> 
          <img src="images/portfolio-img1.png" alt="image" class="img-responsive"> 
          <div class="portfolio-overlay"> 
           <h2>Project One</h2> 
           <a href="#"> 
           <i class="fa fa-search"></i> 
           </a> 
          </div> 
         </div>     
        </div> 

       </div> 
      </div> 

Answer 1

这是由于每个图像后的不同height，为了避免这种使用同样大小的图像，或者设置<div class="col-md-4 col-sm-6 col-xs-12">...</div>彼此相似的高度。

您可以使用background-image属性，而不是仅在<div>上使用<img>。

解决方案：

.portfolio-thumb { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-size: cover; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div>    
 
    </div> 
 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div>   
 
    </div> 
 

 

 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div> 
 
     <div class="portfolio-overlay"> 
 
     <h2>Project One</h2> 
 
     <a href="#"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

希望这有助于！