面板标题中的Bootstrap 3下拉菜单定位错误

Question

我正在使用Bootstrap 3并尝试在面板标题的右侧添加一个下拉菜单.我按下了按钮,float:right但是下拉菜单不再呈现连接到按钮.我认为浮动正在打破与下拉菜单的链接.

我已经尝试添加float:right和删除position:absolute(覆盖到position:initial)我可以使按钮出现在按钮旁边,但它最终包含在panel-headerdiv中,它将面板标题扩展到菜单大小.

我能做些什么吗？

这里有一个Bootply:http://www.bootply.com/4jVDGUJMYg

Answer 1

您需要将dropdown按钮放在btn-group标签内:请参阅文档

工作示例代码段.

 .panel-collapsable .panel-heading h4:after {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   color: white;
   margin-right: 5px;
   cursor: pointer;
 }
 .panel-collapsable .collapsed h4:after {
   content: "\e080";
 }
 .panel-heading .btn-group {
   float: right;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-9 col-md-10 main">
      <div class="panel panel-primary panel-collapsable panel-chart">
        <div class="panel-heading">
          <div class="btn-group">
            <button class="btn btn-primary toggle-dropdown" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"> <span class="glyphicon glyphicon-cog"></span>

            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Action</a>

              </li>
              <li><a href="#">Another action</a>

              </li>
            </ul>
          </div>
          <h4 data-toggle="collapse" data-target="#sg1" aria-expanded="true"> Panel Box here <span class="label label-danger">Danger</span> </h4>

          <div class="clearfix"></div>
        </div>
        <div id="sg1" class="panel-body collapse in" aria-expanded="true">Text text text text text text text text text text text. Text text text text text text text text text text text. Text text text text text text text text text text text.
          <br>Text text text text text text text text text text text. Text text text text text text text text text text text.</div>
      </div>
    </div>
  </div>
</div>