Панели в макете загрузочной сетки

Question

Каков правильный способ использования системы макета самонастройки, чтобы выполнить что-то вроде этого: То есть, я хочу разместить панели в макете сетки, но также иметь сетку макет для контента внутри панелей.

Должен ли я иметь вложенные сетки? Все столбцы должны быть внутри строки? Может ли панель охватывать несколько строк в сетке верхнего уровня? Должна ли каждая панель содержать свою собственную 12-колонную сетку? И т. Д. Кажется, есть много способов сделать это, но Id нравится знать лучшую практику.

Answer 1

Это даст вам стиль сетки, что вам требуется: (EDITED)

<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>