eine Dropdown-Button-Gruppe mit Bootstrap

Question

Mein Problem Geige Inlining ist hier: https://jsfiddle.net/h3mb08ph/

Ich mag würde die "plus" Dropdown-Button-Gruppe links von der Schaltfläche Bearbeiten bewegen.

Ich zog zuerst die div an die richtige Stelle, etwa so: https://jsfiddle.net/h3mb08ph/1/

Als nächstes habe ich versucht, die div zu einem span, zu konvertieren oder sogar die divs zu ändern display bis inline oder inline-block.

Dies hilft, das gewünschte Layout zu erreichen, aber ich kann die Dropdown-Taste nicht mehr erweitern, indem Sie auf + klicken. Irgendeine Idee, wie ich das Tastenlayout unten erreichen kann, während das Dropdown-Menü immer noch erweitert werden kann, während es geklickt wird?

Answer 1

es so versuchen:

I aktualisiert auch Ihre Geige: 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

Ihre HTML wurde falsch formatiert. Ich habe auch klargestellt.

Siehe hier: 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>