ブートストラップの複雑なレイアウト

Question

私はこの複雑なレイアウトをブートストラップで作ったが、ポイントは右のイメージを下に取り除くと、他のイメージはすべて小さくなる。

どうすればこのサイズにすることができますか？

私は幅と高さの数値で作業しようとしましたが、結果は悪かったです！ 画像の数はタイトルに基づいて変更されるため、3枚の画像または2または5枚の画像があります。

私を助けてください！

.container-fluid .expo { 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    text-align: center; 
 
    float: none; 
 
    margin-bottom: 20px; 
 
} 
 
.expoinfo { 
 
    display: inline-block; 
 
    padding: 0; 
 
} 
 
.expoinfo h3 { 
 
    font-size: 22px; 
 
    margin-top: 0px; 
 
    padding-right: 20px; 
 
    text-align: left; 
 
} 
 
.bigimg { 
 
    padding: 0; 
 
    border-radius: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
.bigimg img { 
 
    border-radius: 0; 
 
    width: 100%; 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
    height: 100%; 
 
} 
 
.colthumb { 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
} 
 
.thumbnail { 
 
    padding: 0; 
 
    margin: 0; 
 
    border-style: none; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
    padding-top: 2px; 
 
    padding-right: 2px; 
 
    padding-left: 2px; 
 
    padding-bottom: 2px; 
 
    border-radius: 0; 
 
    border-style: none; 
 
    height: 100%; 
 
}

<div class="container-fluid expo"> 
 
    <div class="row expoinfo"> 
 
    <section class="col-lg-10 col-lg-offset-1"> 
 
     <h3>title</h3> 
 

 
     <div class="bigimg col-sm-6 col-md-6 col-lg-6"> 
 
     <a href="http://fakeimg.pl/700x400/" title=""> 
 
      <img src="http://fakeimg.pl/600x600/" alt=""> 
 
     </a> 
 
     </div> 
 

 
     <div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3"> 
 
     <div class="thumbnail"> 
 
      <a href="http://fakeimg.pl/700x400/" title=""> 
 
      <img src="http://fakeimg.pl/300x300/" alt=""> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3"> 
 
     <div class="thumbnail"> 
 
      <a href="http://fakeimg.pl/700x400/" title=""> 
 
      <img src="http://fakeimg.pl/300x300/" alt=""> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3"> 
 
     <div class="thumbnail"> 
 
      <a href="http://fakeimg.pl/700x400/" title=""> 
 
      <img src="http://fakeimg.pl/300x300/" alt=""> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3"> 
 
     <div class="thumbnail"> 
 
      <a href="http://fakeimg.pl/700x400/" title=""> 
 
      <img src="http://fakeimg.pl/300x300/" alt=""> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </div> 
 
</div>

Answer 1

を私はちょうど私の答えを見つけました！

<div class="row"> 
    <section class="col-lg-offset-2 col-lg-8"> 
    <h3>title</h3> 
     <div class=" thumbcol col-md-4 col-lg-6"> 
     <div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> 
     </div> 
     </div> 
     <div class=" thumbcol col-md-4 col-lg-3"> 
     <div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> </div> 
     </div> 
     <div class=" thumbcol col-md-4 col-lg-3"> 
     <div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div> 
     </div> 
     <div class=" thumbcol col-md-4 col-lg-3"> 
     <div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div> 
     </div> 
    </section> 
    </div> 

Answer 2

あなたはそれがブートストラップのクラスを使用していたにもかかわらず、bootstrap.cssが含まれていませんでした作られた例を除去した後 を削除する前に。

更新のデモを参照してください：https://jsfiddle.net/2aLdmvw4/