Встраивания раскрывающейся кнопочной группы с помощью начальной загрузки

Question

Моей проблемы скрипки здесь: https://jsfiddle.net/h3mb08ph/

Я хотел бы, чтобы переместить «плюс» выпадающей кнопочной группу слева от кнопки редактирования.

Я первый переместил DIV в нужное место, например, так: https://jsfiddle.net/h3mb08ph/1/

Далее я попытался преобразовать div к span, или даже изменить Див-х display - inline или inline-block.

Это помогает достичь желаемого макета, но я больше не могу расширять раскрывающуюся кнопку, нажимая на +. Любая идея, как я могу достичь компоновки кнопок ниже, сохраняя при этом раскрывающееся меню при нажатии?

Answer 1

Попробуйте так:

Я также обновил свой скрипку: https://jsfiddle.net/h3mb08ph/2/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <div class="panel panel-default Object-group"> 
 
    <div class="panel-heading"> 
 
     <span>Outer Block</span> 
 
     <div class="pull-right"> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      <span class="glyphicon glyphicon-plus" aria-hidden="true"> 
 
      </span> 
 
      <span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
 
      <li role="presentation"> 
 
       <a role="menuitem" data-toggle="modal" data-target="#myModal" title="Create Object instance" id="clickable_create_Object_instance" data-ajax-target="#" data-modal-title="Create Object">Create from scratch 
 
      </a> 
 
      </li> 
 
      <li role="presentation" class="disabled"> 
 
       <a role="menuitem" href="#"> 
 
       Clone existing Object </a><a href="#" data-toggle="tooltip" title="You are not permitted to use this feature"><span class="glyphicon glyphicon-question-sign"></span></a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object group" id="clickable_edit_Object_group" data-ajax-target="/get_Object_group/35" data-modal-title="Edit Object Group: Super Computing"> 
 
      <span class="glyphicon glyphicon-edit" aria-hidden="true"> 
 
      </span> 
 
     </button> 
 
     <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Delete Object group" id="clickable_delete_Object_group" data-ajax-target="/delete_Object_group/35" data-modal-title="Delete Object Group: Super Computing"> 
 
      <span class="glyphicon glyphicon-trash" aria-hidden="true"> 
 
      </span> 
 
     </button> 
 
     </div> 
 

 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="panel panel-default Object"> 
 
     <div class="panel-heading"> 
 
      <a href="/f16-Super/schedule/">Inner block 1</a> 
 
      <span class="pull-right"> 
 
      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object instance" id="clickable_edit_Object_instance" data-ajax-target="/get_Object_instance/4" data-modal-title="Edit Object Instance"> 
 
      <span class="glyphicon glyphicon-edit" aria-hidden="true"> 
 
       </span> 
 
      </button> 
 
      </span> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="container"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <p></p> 
 
    </div>

Answer 2

Ваш HTML отформатирован некорректно. Я также очищаю.

Смотрите здесь: https://jsfiddle.net/L7jc4q3s/2/

<div class="panel-body"> 
<div class="panel panel-default Object-group"> 
<div class="panel-heading clearfix"> 
    <p class="pull-left">Outer Block 
    </p> 
    <span class="pull-right"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <span class="glyphicon glyphicon-plus" aria-hidden="true"> 
     </span> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
     <li role="presentation"> 
     <a role="menuitem" data-toggle="modal" data-target="#myModal" title="Create Object instance" id="clickable_create_Object_instance" data-ajax-target="#" data-modal-title="Create Object">Create from scratch 
     </a> 
     </li> 
     <li role="presentation" class="disabled"> 
     <a role="menuitem" href="#"> 
      Clone existing Object </a><a href="#" data-toggle="tooltip" title="You are not permitted to use this feature"><span class="glyphicon glyphicon-question-sign"></span></a> 
     </li> 
    </ul> 
    </div> 
     <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object group" id="clickable_edit_Object_group" data-ajax-target="/get_Object_group/35" data-modal-title="Edit Object Group: Super Computing"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 
    </button> 

    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Delete Object group" id="clickable_delete_Object_group" data-ajax-target="/delete_Object_group/35" data-modal-title="Delete Object Group: Super Computing"> 
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 
    </button> 
    </span> 
    </p> 
</div> 
<div class="panel-body"> 
    <div class="panel panel-default Object"> 
    <div class="panel-heading"> 
     <a href="/f16-Super/schedule/">Inner block 1</a> 
     <span class="pull-right"> 
     <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object instance" id="clickable_edit_Object_instance" data-ajax-target="/get_Object_instance/4" data-modal-title="Edit Object Instance"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"> 
      </span> 
     </button> 
     </span> 
    </div> 
    <div class="panel-body"> 
     <div class="container"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div> 
    </div> 
    </div> 
</div> 
<p></p>