0

在此处输入图像描述我在同一条线上做了 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>

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

有任何想法吗 ？

编辑 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>
4

1 回答 1

2

好的，我尽量不要过多地影响您当前的代码，所以我只是添加了一个 css 修改：

div#show {
    width: 100%;
}

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

于 2013-09-11T06:03:49.977 回答