如何在bootstrap 3.0/bootstrap-ui中的accordion header中添加一个按钮？

Question

我正在尝试为带有下拉菜单的手风琴添加一个按钮,但它似乎没有工作:

1)按钮太大所以它超过了手风琴标题.2)下拉菜单最终在手风琴标题/组内,而不是在其他所有内容之上.

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

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

<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>

这篇文章是类似的,但我希望按钮位于标题的右侧,而不是紧挨着文本,这就是为什么我有一个浮点数:左边.

角度UI手风琴与标题部分中的按钮

Answer 1

s.alem上面有一个很好的例子，但是当我将其转换为 angularjs 1.3 时，我遇到了问题。

主要是，我注意到在 ng-click 中应用了 $event.stopPropagation() 的非下拉按钮在单击时不断重新加载页面。

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

我使用了s.alem 的示例并将其修改为 1.3 和 ui.bootstrap 0.12，并在手风琴主体中制作了一堆带有注释的示例。我希望这有帮助。我仍然想在 1.3.x 中使用普通按钮而不使用下拉按钮，但现在这是可行的......

这是我的 plnkr 代码

<div class="pull-right btn-group btn-group-xs" dropdown>
  <button type="button" class="btn btn-success btn-xs" dropdown-toggle ng-click="mdc.clickToAdd();$event.stopPropagation();">Good</button>
  <button class="btn btn-danger btn-xs" ng-click="mdc.clickToAdd();$event.stopPropagation();">bad</button>
</div>

Answer 2

检查我的Plunker。在 angular.ui github 问题上有一些关于添加“dropdown-append-to-body”的讨论。但在那之前这应该可以解决问题：

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

另外float:right;，您可以使用pull-right引导程序中的类来代替 。按钮组还具有用于调整大小的类，例如btn-group-xs btn-group-sm。您应该检查引导组件。