ブートストラップグリッドレイアウトで画像を整理する

Question

こんにちは私は、ブートストラップグリッドレイアウトを使用して画像のグループを整理する際に助けが必要です。画像で 私が望む結果が届くあり：https://i.stack.imgur.com/ZDa2Z.pngは

画像の位置が間違っている、あなたは私のコードを見て私を助けることができる：https://i.stack.imgur.com/RuJud.png

私のコードは、この結果を生成しますか？

<div class="container"> 
 
    <div class="row game-group-titles"> 
 

 
    <div class="col-md-6"> 
 

 
     <h4>GIOCHI PREFERITI</h4> 
 

 
     <div class="row"> 
 
     <div class="col-md-12 giocogrosso"> 
 
      <img src="../lggioco.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="col-md-6 giocopiccoloo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     <div class="col-md-6 giocopiccolo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="col-md-6 giocopiccoloo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     <div class="col-md-6 giocopiccolo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="col-md-6"> 
 

 
     <h4>CURRENTLY PLAYING</h4> 
 

 
     <div class="row"> 
 
     <div class="col-md-12 giocogrosso"> 
 
      <img src="../lggioco.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="col-md-6 giocopiccoloo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     <div class="col-md-6 giocopiccolo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="col-md-6 giocopiccoloo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     <div class="col-md-6 giocopiccolo"> 
 
      <img src="../giocoo.png" alt=""> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

これはあなたがあなたの画像に任意のマージンやパディングを適用していないことを確認してください

 
.row { 
 
    background: blue; 
 
    max-width: 410px; 
 
} 
 
.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 

 
    > .col, > [class*="col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    } 
 
}

<h4>GIOCHI PREFERITI</h4> 
 
<div class="row no-gutters"> 
 
    <div class="col-12 giocogrosso"> 
 
    <img src="http://via.placeholder.com/410x190" alt=""> 
 
    </div> 
 
    <div class="col-xs-6 giocopiccoloo"> 
 
    <img src="http://via.placeholder.com/205x95" alt=""> 
 
    </div> 
 
    <div class="col-xs-6 giocopiccoloo"> 
 
    <img src="http://via.placeholder.com/205x95" alt=""> 
 
    </div> 
 
    <div class="col-xs-6 giocopiccoloo"> 
 
    <img src="http://via.placeholder.com/205x95" alt=""> 
 
    </div> 
 
    <div class="col-xs-6 giocopiccolo"> 
 
    <img src="http://via.placeholder.com/205x95" alt=""> 
 
    </div> 
 
</div>