부트 스트랩 그리드 레이아웃으로 이미지 구성

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>