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>

希望這有助於！