Bootstrap muliti column

Question

<section id="home-area"> 
    <div class="container"> 
     <div class="row"> 

     <div class="col-md-8"> 
      <div class="col-md-2"> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      </div> 

      <div class="col-md-2"> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      </div> 

      <div class="col-md-2"> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      </div> 

      <div class="col-md-2"> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      <p>Content goes here</p> 
      </div> 
     </div> 

     <div class="col-md-4"> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     <p>Right Sitebar content goses herpe</p> 
     </div> 
     </div> 

    </div> 
</section> 

Я хочу использовать бутстрап рамки.

Я принял самозагрузку 'col-md-12'.

Я принял правильную врезку в 'col-md-4'.

Я хочу использовать остальную часть седловине как (Col-мкр-2) * 4 под Col-мкр-8. Но (col-md-2) * 4 не настроен хорошо под «col-md-8».

Answer 1

Когда вы хотите разделить столбец в некоторой части, вы, чтобы добавить div.row

и А ДИВ отдельный в 4 area => col-md-3 (12/4 = 3)

Вот это bootply

Code:

<div class="col-md-8"> 
    <div class="row"> 
    <div class="col-md-3"> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    </div> 

    <div class="col-md-3"> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    </div> 

    <div class="col-md-3"> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    </div> 

    <div class="col-md-3"> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    <p>Content goes here</p> 
    </div> 
    </div> 
</div> 

<div class="col-md-4"> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
<p>Right Sitebar content goses herpe</p> 
</div>