Span2 Twitter小引導啓動

Question

我想用bootstrap製作一個小的雙列菜單。這個想法是有一個200px乘300px的div。該結構將，我認爲是這樣的：

<div id="menu"> 
    <div class="container"> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
      </div>    
     </div> 
    </div>    
</div> 

CSS：

.menu{ 
    width:200px; 
    height: 300px; 
    background-color:green; 
    } 

    .filterEl{ 
     position: relative; 
     height:40px; 
     border: solid black 2px; 
    } 

的問題是，一切都被搗碎的菜單div的左上角。我怎樣才能在meny div中均勻地分配一切，就像我在整頁上使用Bootstrap一樣？

Answer 1

從你的榜樣，我想你想的span2 DIV實際上是你row-fluid還有：

<div id="menu"> 
    <div class="container"> 
     <div class="row-fluid span2"> 

       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 

     </div> 
     <div class="row-fluid span2"> 

       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 
       <div class="span1"> 
        <div class="filterEl"> 
         some text 
        </div> 
       </div> 

     </div> 
    </div>    
</div> 

的演示中看到this jsfiddle。

Answer 2

每列的父應該是一行。

所以，試試下面的結構。

<div id="menu"> 
    <div class="container"> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="row-fluid"> 
        <div class="span1"> 
         <div class="filterEl"> 
          some text 
         </div> 
        </div> 
        <div class="span1"> 
         <div class="filterEl"> 
          some text 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="row-fluid"> 
        <div class="span1"> 
         <div class="filterEl"> 
          some text 
         </div> 
        </div> 
        <div class="span1"> 
         <div class="filterEl"> 
          some text 
         </div> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div>    
</div> 

Reference