Bootstrap 3 Выпадающее меню в заголовке панели помещено неправильно

Question

Я использую Bootstrap 3 и пытаюсь добавить выпадающее меню в правой части панели. У меня есть кнопка, расположенная с float:right, но выпадающее меню больше не отображается на кнопке. Я думаю, что float нарушает связь с выпадающим меню.

Я попытался добавить float:right и удаление position:absolute (перезапись в position:initial) Я могу сделать выпадающую появиться рядом с кнопкой, но в конце концов, содержащиеся в panel-header DIV, который расширяет заголовок панели к размеру меню.

Есть ли что-нибудь, что я могу сделать по этому поводу?

Там в Bootply здесь: http://www.bootply.com/4jVDGUJMYg

Answer 1

Вам нужно разместить кнопку dropdown внутри btn-group тега: см Docs

Рабочий пример Snippet.

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

Answer 2

Попробуйте добавить этот CSS стиль в раскрывающемся списке:

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

Абсолютное позиционирование по отношению к родительской панели, так что вам просто нужно настроить вверху/справа/слева/внизу по вашему вкусу.