如何在 bootstrap 3.0/bootstrap-ui 的手风琴标题中添加按钮? [英] How to add a button in accordion header in bootstrap 3.0/bootstrap-ui?
问题描述
我正在尝试向具有下拉菜单的手风琴添加一个按钮,但它似乎不起作用:
1) 按钮太大,所以它超过了手风琴标题.2) 下拉菜单最终位于手风琴标题/组内,而不是在其他所有内容之上.
解决这些问题的最佳方法是什么?我要
以下是我的手风琴组代码:
<手风琴标题><div class="btn-group" style="float:right;"><button type="button" class="btn btn-info">Info</button>
</accordion-heading></accordion-group>
这篇文章很相似,但我希望按钮位于标题的右侧,而不是紧邻文本,这就是为什么我有一个浮动:左.
检查我的 Plunker.有一些关于在 angular.ui github 问题上添加dropdown-append-to-body"的讨论.但在那之前,这应该可以解决问题:
.panel-group .panel {溢出:可见;}
此外,您可以使用 bootstrap 中的 pull-right
类代替 float:right;
.按钮组也有用于调整大小的类,例如 btn-group-xs
btn-group-sm
.您应该检查 bootstrap 组件.
I am trying to add a button to the accordion that has a dropdown menu but it doesn't seem to be working a:
1) button is too big so it goes past the accordions header. 2) The dropdown menu ends up inside the accordion header/group and not on top of everything else.
What is the best way to fix these? I want
The following is my code for the accordion group:
<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>
This post is similar, but I want the buttons to be on the right of the header instead of being right next to the text, which is why I have a float:left.
Angular UI accordion with buttons in the header part
Check my Plunker. There are some discussions about adding "dropdown-append-to-body" on angular.ui github issues. But till then this should do the trick:
.panel-group .panel {
overflow: visible;
}
Also instead of float:right;
, you can use pull-right
class from bootstrap. Button groups also have classes for sizing such as btn-group-xs
btn-group-sm
. You should check the bootstrap components.
这篇关于如何在 bootstrap 3.0/bootstrap-ui 的手风琴标题中添加按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!