ブートストラップCSSグリッドカスタマイズ

Question

私は、左に1つのフルイメージと大きなイメージの右側に4つのサムネイルイメージを持つイメージグリッドを作成したかったのです。私はここで何をやったかのような何か：私は、行のサイズを大きくすることから、画像（サムネイル）の第2のセットを防ぐにはどうすればよい

https://codepen.io/ashwindkini/pen/qabRok

<div class="container"> 
<div class="row"> 
     <div class="col-md-6"> 
      <img src="https://placehold.it/450x450" alt="" /> 
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
      </div> 
      <div class="col-md-3"> 
       <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
      </div> 
      <div class="col-md-3"> 
       <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
      </div> 
      <div class="col-md-3"> 
       <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
      </div> 
     </div>  

？

Answer 1

は、あなたはそれが小さい「サムネイル」と比較して応答スケールするように、実際に拡大画像拡大画像を作成することができますか？

イメージの幅（列のパディングによって強制される）がイメージの高さを制限しないように、パディングを列から削除すると役立ちます。

すべてが

<div class="container"> 
    <div class="row"> 
     <div class="img col-sm-6 col-md-6"> 
      <img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image"> 
     </div> 
     <div class="img col-xs-6 col-sm-6 col-md-3"> 
      <img src="//placehold.it/450/EEE" class="img-responsive" > 
     </div> 
     <div class="img col-xs-6 col-sm-6 col-md-3"> 
      <img src="//placehold.it/450" class="img-responsive" > 
     </div> 
     <div class="img col-xs-6 col-sm-6 col-md-3"> 
      <img src="//placehold.it/450" class="img-responsive" > 
     </div> 
     <div class="img col-xs-6 col-sm-6 col-md-3"> 
      <img src="//placehold.it/450/444" class="img-responsive" > 
     </div> 
    </div> 
</div> 

..単一 rowに行くことができ

http://www.codeply.com/go/y9nZTlXSWT

Answer 2

"row"要素は、別の行要素の直接の子であってはなりません。別のcol-md-6の子として置くべきです。ここで

は例です：

https://codepen.io/anon/pen/dpGvOJ

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <img src="https://placehold.it/450x450" alt="" /> 
     </div> 

     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
       </div> 
       <div class="col-md-3"> 
        <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
       </div> 
       <div class="col-md-3"> 
        <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
       </div> 
       <div class="col-md-3"> 
        <img src="https://placehold.it/450x450" alt="" class="img-responsive" /> 
       </div> 
      </div>  
     </div> 
    </div> 
</div>