Angularjs 如何在bootstrap 3.0/bootstrap-ui中的accordion标头中添加按钮？

我试图在手风琴上添加一个按钮，该按钮有一个下拉菜单，但它似乎不起作用：

1） 按钮太大，因此超出了accordions标题。 2） 下拉菜单在accordion标题/组中结束，而不是在其他所有内容的顶部

解决这些问题的最佳方法是什么？我想要

以下是我的手风琴组代码：

<accordion-group is-open="true">
    <accordion-heading>
        <div class="btn-group" style="float:right;">
            <button type="button" class="btn btn-info">Info</button>
        </div>   
    </accordion-heading>
</accordion-group>

检查我的。在angular.ui github问题上，有一些关于添加“dropdown append to body”的讨论。但在那之前，这应该会起作用：

.panel-group .panel {
      overflow: visible;
}

也不是
float:right，您可以从引导中使用
向右拉
类。按钮组还具有用于调整大小的类，例如
btn group xs
btn group sm
。您应该检查一下。
上面有一个很好的示例，但是当我将其转换为angularjs 1.3时遇到了问题

主要是，我注意到ng click中带有应用的$event.stopPropagation（）的非下拉按钮在单击页面时不断重新加载页面

在进一步研究之后，我意识到既然下拉按钮工作得很好，为什么不在需要的地方像对待下拉按钮一样对待常规按钮呢。解决方案是从下拉版本中添加两个属性指令（dropdown，dropdown toggle），并将它们分别放在一个常规按钮组中

我使用示例并将其修改为1.3和ui.bootstrap 0.12，并在accordion正文中制作了一系列带有注释的示例。我希望这有帮助。我仍然希望在1.3.x中使用普通按钮，而不使用下拉按钮，但现在这是可行的



好
坏的
我的解决方案：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <div class="row">
            <div class="col-lg-2">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Titel
                    </a>
                </h4>
            </div>
            <div class="col-lg-10">
                <button class="glyphicon glyphicon-pencil pull-right"></button>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <h1>Inhalt</h1>
        </div>
    </div>
</div>


吸入


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <div class="row">
            <div class="col-lg-2">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Titel
                    </a>
                </h4>
            </div>
            <div class="col-lg-10">
                <button class="glyphicon glyphicon-pencil pull-right"></button>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <h1>Inhalt</h1>
        </div>
    </div>
</div>