在 Twitter 引导程序中对齐可折叠按钮

Question

我在同一行做了两个按钮。第二个是可折叠按钮，它向视图中添加了一行 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>

我的需要：我不希望新行与上面的小按钮对齐。事实上，我希望它与大按钮对齐。

有什么想法吗？

编辑 1： Bootstrap 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/