부트 스트랩 레이아웃 문제 - 여러 열이 바둑판 식으로 배열 된

Question

안녕하세요 누군가 나를 도울 수 있기를 바랍니다. 나는 상대적으로 Bootstrap에 익숙하지 않으며 열 레이아웃과 그 작동 원리에 대해 머리 숙여 할 수 있습니다. 그러나 다른 높이에서 다른 기둥을 만들고 싶을 때 문제가 발생했습니다.

나는 다음과 같은 레이아웃을 달성하기 위해 노력하고 있어요 : 내가 가진 문제는 그 위치에 tab3에을 얻기 위해 노력하고있다

, 나는 그것이 TAB2 아래 쌓아해야합니다. 나는 tab5과 을 분류하여 마진을 추가하여 분류했지만이 내용이 tab3 인 경우 너무 복잡하다고 생각했습니다. 당신은 항상 다른 열 내부의 열을 만들 수 부트 스트랩의 그리드 시스템에 관해서

bootply (감사 @Gorostas)

Answer 1

. 아랫 부분을 마쳤으므로 아쉬운 부분이 있습니다.

http://www.bootply.com/wG58MwAews

<div class ="container"> 

    <div class ="row"> <!--Use a Row to keeps columns on the same line for the top half--> 

     <div class="col-md-8"> <!--Tab 1--> 

     </div> 

     <div class="col-md-2"> <!--Space for Tab 2 and 3--> 

     <div class="row"> <!--Row is not necassery when using 12 but I use them for smaller columns viewed on a smaller viewport--> 

      <!-- "col-md12" make use of all spacing of the grid that is available within the parent--> 
      <div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing--> 


      </div> <!--Tab 2--> 

      <div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing--> 


      </div> <!--Tab 3--> 

      </div> 

     </div> 

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


     </div> <!--Tab 4--> 

    </div> 

    <div class="row"> 

      <!-- Bottom half of tabs--> 

    </div> 

</div> 

기본 부트 스트랩 3를 사용하는 경우 그리드 12 개 블록 수평이 될 것입니다. 당신이 열에있는 새로운 열을 만들면 그 열을 12로 나누고 그리드 시스템에 상대적인 위치, http://getbootstrap.com/examples/grid/, 내 예제에서와 같이 다른 12 개의 블록으로 나눌 수 있습니다. 자세한 설명이 필요하면, 하지만이 일을해야합니다.