부트 스트랩 그리드 레이아웃의 패널

Question

부트 랫랩 레이아웃 시스템을 사용하여 다음과 같은 작업을 수행하는 올바른 방법은 무엇입니까? 즉, 패널을 그리드 레이아웃에 배치하고 그리드를 배치하고 싶습니다. 패널 내의 컨텐츠에 대한 레이아웃 접근 방식.

중첩 된 격자가 있어야합니까? 모든 열이 행 안에 있어야합니까? 패널을 최상위 레벨 그리드의 여러 행으로 확장 할 수 있습니까? 각 패널에 12 열 그리드가 있어야합니까? 등. 이것을 달성하는 데는 여러 가지 방법이있는 것처럼 보이지만, ID는 모범 사례를 알고 싶어합니다.

Answer 1

이것은 당신이 필요로하는 당신에게 그리드 스타일을 줄 것이다 : (이 편집)

<div class="row"> 
    <div class="col-xs-6"> 
     <!-- START PANEL 1 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
      </div> 
     </div> 
     <!-- END PANEL 1 --> 

     <!-- START PANEL 3 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
       </div> 
      </div> 
     </div> 
     <!-- END PANEL 3 --> 
    </div> 
    <div class="col-xs-6"> 
     <!-- START PANEL 2 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
      </div> 
     </div>   
     <!-- END PANEL 2 --> 
    </div> 
</div>