Question

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

我尝试添加float:right并删除position:absolute（覆盖到position:initial）我可以在按钮旁边显示下拉列表，但最终会包含在{{1}中div，它将面板标题扩展为菜单大小。

我能做些什么吗？

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

Answer 1

您需要将dropdown按钮放在btn-group标记内：请参阅Docs

工作示例代码段。

＆＃13;

 .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;
 }

＆＃13;

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

＆＃13;

Answer 2

尝试将此CSS样式添加到下拉列表中：

.panel-heading .dropdown-menu {
  right: 31px;
  top: 42px;
  left: initial;
}

绝对定位与父面板有关，因此您只需根据自己的喜好调整顶部/右侧/左侧/底部设置。

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

2 个答案: