부트 스트랩에서 어떻게 레이아웃을 만들 수 있습니까?

Question

I는 3 열로 5-5-2 있고 그것이 동일한 높이이지만 가운데 열되어야하는 두 개의 행을 가지며, 첫 번째 행은 하나의 열이며, 두 번째 행은 두 열

<div class="container"> 
 
    <div class="row equal"> 
 
    <div class="col-xs-12 col-sm-5"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://placehold.it/300x300" alt="">  
 
     </figure> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-5"> 
 
     <div class="row"> 
 
     <div class=" col-sm-12"> 
 
      <figure> 
 
      <img class="img-responsive" src="http://placehold.it/300x150" alt="">  
 
      </figure> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class=" col-sm-6"> 
 
      <figure> 
 
      <img class="img-responsive" src="http://placehold.it/300x300" alt=""> 
 
      </figure> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <figure> 
 
      <img class="img-responsive" src="http://placehold.it/300x300" alt=""> 
 
      </figure> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-2"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://placehold.it/300x600" alt=""> 
 
     </figure> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

을 갖는다 부트 스트랩을 사용하고 img 크기를 설정하십시오. 코드는 다음과 같습니다.

<figure class="figure"> 
     <img src="..." width="200px" height="200px" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure."> 
     <figcaption class="figure-caption">A caption for the above image.</figcaption> 
    </figure>