Правильный способ структурирования HTML с помощью Bootstrap

Question

Я использовал Bootstrap в течение некоторого времени, структурируя свои HTML-элементы, не зная, правильно ли я делаю это. Это работает, но я хотел бы знать, есть ли лучший способ сделать это.

Давайте этот шаблон, например:

Что я первый, что я пытаюсь разделить страницу на более мелкие куски. В этом случае я бы начал с деления левого и правого столбцов, указав левый столбец 4 и правый 8 столбцов. Я бы написал и разместил атрибуты HTML/class следующим образом:

... 
<div class="row"> 
    <div class="col-md-4"> 
    <div id="upperLeftCol" class="col-md-12"> ... </div> 
    <div id="lowerLeftCol" class="col-md-12"> 
      <div id="uniqueId1" class="col-md-12"> 
       <img src="#" alt="..."> 
       <div class="col-md-12"> 
        some messge 
       </div> 
      </div 
      <div id="uniqueId2" class="col-md-12"> 
       <img src="#" alt="..."> 
       <div class="col-md-12"> 
        some messge 
       </div> 
      </div 
     </div> 
    </div> 
    <div class="col-md-8"> 
     ....... 
    </div 
</div> 

Ну, вы получите картину. Я пытаюсь разделить каждый подраздел как собственный div и присвоить ему атрибут класса col-md-12, так как я заметил, что он лучше всего подходит для другого div, который имеет одну и ту же аннотацию класса.

Я уверен, что есть более правильный способ сделать это. Что такое «лучший» подход? Также когда я должен создать новую «строку»?

Answer 1

Я предпочитаю использовать несколько строк:

<div class="row"> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div id="upperLeftCol" class="col-md-12"> ... </div> 

код лучше понять для других людей и избежать некоторых ошибок проектирования при использовании динамических клеток.