ブートストラップcol-sm-6 1行に3個のアイテム

Question

私は、行とその6つのポートフォリオの項目の中にコンテナを持っています。私は次のような結果を得る小さな画面で使用 このコード：

• 1行目：2枚の画像
• 2行目：2枚の画像
• 第4回：
• 3行目右側に1枚の画像ライン：左側の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>の高さを設定します。

<div>で<img>を使用するのではなく、background-imageプロパティを使用できます。

ソリューション：

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

この情報がお役に立てば幸い！