Bootstrap 带有附加按钮的引导程序折叠式V形图标

oxiaedzo 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(147)

我正在使用带有折叠功能的引导面板来整理页面布局。每个可折叠面板在标题栏的右侧都有一个V形图案，以提供功能的常见视觉线索。
我想在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>

我见过一些面板标题右边的按钮组的例子，但是我发现的 accordion 折叠的例子中只有使用了href，我不知道如何合并这两个。

谢谢-谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/47556357/bootstrap-accordian-collapse-chevron-icon-with-additional-buttons

1条答案

按热度按时间

suzh9iv81#

您可以将按钮直接放在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>

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 带有附加按钮的引导程序折叠式V形图标

1条答案

相关问题

热门标签

最新问答