Menu
Right now I have this coming out on the interface:
But between the buttons with the bolt, plus-circle and gear I would like no gap. I have the gaps there because it seems like it is mandatory, per this comment in the Bootstrap Components docs:
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
So, right now the gap is there because the buttons are laid out with a format of:
<div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-sm"> <button type="button" title="Focusing" ... > <span class='fa fa-bolt '></span> </button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> <span class='fa fa-plus-circle '></span> <span class='fa fa-caret-down '></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> <span class='fa fa-gear '></span> <span class='fa fa-caret-down '></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> </div> If so, how would I do that? As it stands, it seems like I can place individual buttons ahead of a drop-down menu, but not multiple drop-down menus.
If I put multiple drop-down menus in the same button group, they all fire when one is clicked.
264
Example Explained Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.
This is possible, you must wrap each dropdown button in another .btn-group div (without using .btn-toolbar) :
<div class="btn-group"> <button type="button" class="btn btn-default"> <i class="glyphicon glyphicon-flash"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-plus-sign"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> Bootply
Documentation
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
