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

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

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

Проблема

Сначала я переместил div в правильное место, например: https://jsfiddle.net/h3mb08ph/1/

Чуть лучше

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

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

введите здесь описание изображения


drop-down-menu css twitter-bootstrap buttongroup
person Jedi    schedule 04.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Я также обновил вашу скрипку: 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>

person Cameron    schedule 04.08.2016

arrow_upward
2
arrow_downward

Ваш 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>

person Red2678    schedule 04.08.2016