Question

我想将“加号”下拉按钮组移到编辑按钮的左侧。

我首先将div移动到正确的位置，如下所示：https://jsfiddle.net/h3mb08ph/1/

接下来，我尝试将div转换为span，甚至将div的display更改为inline或inline-block。

这有助于实现所需的布局，但我无法再通过单击 + 来展开下拉按钮。知道如何实现下面的按钮布局，同时仍然允许下载菜单在点击时展开吗？

Answer 1

您的HTML格式不正确。我也明确了。

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

Answer 2

试试这样：

我还更新了你的小提琴：https://jsfiddle.net/h3mb08ph/2/

＆＃13;

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

＆＃13;

使用引导程序内联下拉按钮组

2 个答案: