使用 bootstrap 内联下拉按钮组
Inlining a dropdown button-group using bootstrap
我的问题fiddle在这里：https://jsfiddle.net/h3mb08ph/
我想将 "plus" 下拉按钮组移动到编辑按钮的左侧。
我首先将 div 移动到正确的位置，如下所示：https://jsfiddle.net/h3mb08ph/1/
接下来，我尝试将 div 转换为 span，甚至将 div 的 display 更改为 inline 或 inline-block。
这有助于实现所需的布局，但我无法再通过单击 + 来展开下拉按钮。知道如何实现下面的按钮布局，同时仍允许下拉菜单在单击时展开吗？
这样试试：
我也更新了你的fiddle：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>
您的 HTML 格式不正确。我也clearfixed.
看这里：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>
我的问题fiddle在这里：https://jsfiddle.net/h3mb08ph/
我想将 "plus" 下拉按钮组移动到编辑按钮的左侧。
我首先将 div 移动到正确的位置，如下所示：https://jsfiddle.net/h3mb08ph/1/
接下来，我尝试将 div 转换为 span，甚至将 div 的 display 更改为 inline 或 inline-block。
这有助于实现所需的布局，但我无法再通过单击 + 来展开下拉按钮。知道如何实现下面的按钮布局，同时仍允许下拉菜单在单击时展开吗？
这样试试：
我也更新了你的fiddle：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>
您的 HTML 格式不正确。我也clearfixed.
看这里：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>