bootstrap 带有附加按钮的手风琴折叠人字形图标

Question

我正在使用 bootstrap 带有手风琴折叠的面板来整理我的页面布局。每个可折叠面板在标题栏的右侧都有一个 V 形，以提供通常的功能视觉线索。

我想在人字形的最左边添加一个按钮，但我不知道该怎么做。

我已经创建了一个 Fiddle 代码来突出显示该问题，但下面是面板 header 代码。

<div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TS0002-collapsePanel-1">My title</a> </h4>
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-info btn-xs">Save <span class="glyphicon glyphicon-floppy-save"></span></button>
    </div>    
  </div>
</div>

我在面板 headers 的右侧看到了一些按钮组的示例，但是我发现手风琴折叠的唯一示例使用了 href，但我不知道如何合并这两个.如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您可以将按钮直接放在 h4 中，紧挨着锚点 link，然后使用 css 将其与右侧对齐，这样它就会出现在切换按钮旁边雪佛龙，像这样：

<h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TS0002-collapsePanel-1">My title</a> 
    <button type="button" class="btn btn-info btn-xs mySaveButton">Save <span class="glyphicon glyphicon-floppy-save"></span></button>
</h4>

Fiddle 已更新以显示相同内容，包括 css 和 JS：https://jsfiddle.net/eLb20n2t/9/

bootstrap 带有附加按钮的手风琴折叠人字形图标

bootstrap accordian collapse chevron icon with additional buttons

accordion

collapse

twitter-bootstrap