부트 스트랩 그리드 레이아웃

Question

나는 그 (? 고급)의 gridview를 만들려고 할 때 부트 스트랩 그리드 선 시스템으로 초보자 그래서 난 stucked있어입니다 :

그래서 내 문제는 내가에 블록을 구성하는 방법을 모르는 것입니다 왜냐하면 어떤 블록은 다른 높이를 가져야하기 때문입니다. 예를 들어 블록 5의 높이는 블록 3과 2와 같은 크기 여야합니다.

그게 가능합니까? 또한 블록 사이에 약간의 공간이 있어야하므로 배경 이미지가 해당 공간을 채워야합니다.

도와주세요.

Answer 1

Div2, 3 및 4를 자신의 컨테이너 div (클래스 .col-md-3)에 배치하고 5 및 6을 다른 컨테이너 div (클래스 .col -md-3). div 1에 .col-md-6 클래스가 있는지 확인하십시오.

편집 : 미디어 쿼리를 사용하여 바탕 화면에서 고정 된 높이로 만들면 모바일 일 때 유연한 높이가됩니다.

@media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}} 

Answer 2

간단한 방법은 나열된 순서대로 div를 선언 한 다음 간단한 float: left을 적용하는 것입니다. 각 div의 높이를 수동으로 정의하면 모든 div가 제자리에 들어 맞아야합니다!

Answer 3

레이첼이 올바른 생각을 가지고 있습니다. 행을 컨테이너에 중첩시킨 다음 CSS를 사용하여 높이를 조정하면됩니다.

Answer 4

이 작업을 수행하는 가장 효율적인 방법은 단순히 3 개의 열이있는 단일 행을 사용하는 것입니다. div는 해당 열 안에 쌓을 수 있으며 각 열의 높이를 정의 할 수 있습니다. 답변에 대한 http://jsfiddle.net/StSmith/Z9SpM/1/

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div id="box1">1</div> 
    </div> 
    <div class="col-lg-3"> 
     <div id="box2">2</div> 
     <div id="box3">3</div> 
     <div id="box4">4</div> 
    </div> 
    <div class="col-lg-3"> 
     <div id="box5">5</div> 
     <div id="box6">6</div> 
    </div> 
</div>