在折叠Bootstrap中对齐按钮和文本

Question

我尝试使用元素Collapse in Bootstrap，但我没有什么问题。

这是示例

的图像

我尝试将我的文字与同一行中的按钮垃圾对齐。 你可以看到它已经转移了。

如何解决这个问题？

<form method="post" action="wbx.php">
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
                </a>
                <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
                    <i class="icon-trash icon-white"></i>
                </button>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2</a>
                <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
                    <i class="icon-trash icon-white"></i>
                </button>

            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
    </div>
</form>

在我的另一页的控制器中：

if(!empty($_POST['supprUserAlias']))
{
    $savant->deletesUserAlias = $gemel->setDeleteUserAlias($_POST['supprUserAlias'], $username, $domain, $serverMail);
    header('Location: wbx.php?user='.$username.'#alias');
    exit;
}

编辑

最后找到解决方案：

<button> <div class="accordion-group">和<div class="accordion-heading">

之间的<form method="post" action="wbx.php"> <div class="accordion" id="accordion2"> <div class="accordion-group"> <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'"> <i class="icon-trash icon-white"></i> </button> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div>

{{1}}

Answer 1

您只需将按钮放在链接（a）标记内即可。我认为您还应该使按钮更小（btn-mini），以便它在折叠链接中很好地适应。

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1 <button class="btn btn-mini btn-danger pull-right" type="submit"><i class="icon-trash icon-white"></i></button>
</a>

Demo on Bootply

编辑 -

点击按钮可以像..一样处理。

$('.accordion-toggle .btn').click(function(e){
    e.preventDefault();
    alert("button!");
    return false;
})