對齊Twitter引導中的可摺疊按鈕

Question

我在同一行上做了2個按鈕。第二個是可摺疊的按鈕，在視圖中增加了一排2個以上的按鈕。所有這些工作正常。

但是，新摺疊的按鈕行與第二個按鈕對齊。我希望它將它重新排列在新摺疊的行中。這怎麼可能？

<div class="span5 offset4"> 
    <button class="btn-primary btn-large btn-bank" type="button" 
     style="width: 100%;">Big Button </button> 
</div> 

<div id="collapsabilebutton"> 
    <a href="#show" data-toggle="collapse"><button 
    class="btn btn-large"> 
    Button just next to Big button . Click it to expand a new row of buttons . 
    </button></a> 
</div> 

<div id="show" class="collapse"> 
    <button class="btn btn-small">hi</button> 
    <button class="btn btn-small">hi</button> 
</div> 

我的需求：我不想讓新行留在它上面的小按鈕上。事實上，我希望它是用Big按鈕來代替。

任何想法？

編輯1：引導版本2.3

編輯2：添加的圖像，因爲它很難準確地重新創建的小提琴。

我想將Hi按鈕放在Click Me按鈕的下方，但將它與Big Button對齊。

**EDIT 3 (Answer)** 

這個解決方案其實很簡單。可摺疊按鈕應放置在必須進行對齊的父級的div標籤內！因此，改變了代碼以下，它的工作原理：

<div class="row"> 
    <div class="span5 offset4"> 
     <button class="btn-primary btn-large btn-primary" type="button" 
      style="width: 100%;">Large Button</button> 
      <div id="show" class="collapse"> 
       <button class="btn btn-small">hi</button> 
       <button class="btn btn-small">hi</button> 
      </div> 
    </div> 
    <div id="collapsabilebutton"> 
     <a href="#show" data-toggle="collapse"><button 
      class="btn btn-large">Click</button></a> 
    </div> 
</div> 

Answer 1

好吧，我想不會太多影響你當前的代碼，所以我只是增加了一個CSS修改：

div#show { 
    width: 100%; 
} 

的jsfiddle：http://jsfiddle.net/cDyHz/4/