ブートストラップ画像ギャラリーセクション

Question

私のサイトには、画面全体にわたって伸びるセクションがあります。

このセクションに4つの画像を追加し、もう一方を追加して反応させたいと思います。私は、彼らが背景を埋めるようにし、必要に応じてそれらの間を壊すようにします。私が望む効果を達成するために私のコードを以下のように変更する必要がありますか？

#games { 
    background-color: #000; 
} 

#games img { 
    width: 100%; 
    height: auto; 
} 

.4columns { 
    width: 32%; 
    display: inline-block; 
} 

<section id="games" class="section section-games"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/1.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/2.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/3.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/4.png"></a> 
     </div> 
     </div> 
</section> 

Answer 1

は、私はあなたがこのような何かをしたいと思う：

.map{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.map img{ 
 
    float: left; 
 
    width: 25%; 
 
}

<div class="map"> 
 
    <span> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
    </span> 
 
</div>