jquery - 在 Twitter Bootstrap 中对齐可折叠按钮

Question

我在同一条线上制作了 2 个按钮。第二个是可折叠按钮，它向 View 添加了一行 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: 添加了图像，因为很难准确地重新创建 fiddle 。

我想将 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/