Bootstrap muliti列

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-4'.

採取自舉'col-md-12'.

我已採取右側欄我想使用COL的其餘部分（COL-MD-2）* 4下COL-MD-8。但是（col-md-2）* 4在'col-md-8'下安裝得不好。

Answer 1

當你想在某些部分拆一列，你已經添加div.row

而且一個div單獨在4 area => col-md-3 (12/4 = 3)

這裏是一個bootply

代碼：

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