Question

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

我想在雪佛龙的左边添加一个按钮，但我无法弄明白。

我创建了Fiddle我的代码以突出显示该问题，但面板标题代码如下所示。

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

我在面板标题的右侧看到了一些按钮组的例子，但手风琴折叠的唯一例子我发现使用了hrefs，我不知道如何合并两者。我们将非常感激地提供任何帮助。

感谢。

Answer 1

您可以将按钮直接放在h4中，紧靠锚链接旁边，然后使用css将其对齐到右侧，使其出现在切换V形符号旁边，如下所示：

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

小提琴更新显示相同内容，包括css和JS：https://jsfiddle.net/eLb20n2t/9/

引导手风琴折叠雪佛龙图标与其他按钮

1 个答案: