網格框引導

Question

我想bulid格象下面

IMG LINK照片：http://postimg.org/image/qo3b4nof1/

但我得到DIVê幾乎在旁邊的d-DIV

這裏是我的代碼

<div class="container"> 
    <div class="row"> 
     <div class="col-md-1"> 
      <div class="col-md-1">A</div><br/> 
      <div class="col-md-1">B</div><br/> 
      <div class="col-md-1">C</div> 
     </div> 
     <div class="col-md-11">D<br/> 
      <div class="col-md-1">E</div>  
     </div> 
    </div> 
</div> 

我添加了特徵線，因爲DIV-A和DIV-B成了無特徵線一塊。

用表格做它更好嗎？

Answer 1

你並不需要使用容器和自舉3 *

我改變了你的代碼相匹配的提供屏幕截圖，請參閱本http://jsfiddle.net/Sd2zw/行。 我只是用XS列，因爲的jsfiddle的小屏幕，你可以通過MD更換回：另外

<div> 
     <div class="col-xs-1"> 
      <div class="col-xs-12">A</div> 
      <div class="col-xs-12">B</div> 
      <div class="col-xs-12">C</div> 
      <span class="clearfix"></span> 
     </div> 
     <div class="col-xs-11"> 
      <div class="col-xs-12 d-container">D</div> 
      <div class="col-xs-12"> 
       <div class="col-xs-1">E</div> 
       <span class="clearfix"></span> 
      </div>  
     </div> 
     <span class="clearfix"></span> 
    </div> 

，使用一些clearfix標籤清除浮動。