JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!--
Custom HTML : add a "group-dropdown" class to the dropdown
"btn-group" div.
The "btn-group" div must wrap the whole button (button+submenu items), as specified in the bootstrap doc. This allows you to put several dropdowns in the same buttons group.
Works whatever their position in the button group is.
-->
<!---
Here starts the button group
-->
<div class="btn-group">
<!--First dropdown : note the "group-dropdown" property -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Filter by">
<i class="icon icon-filter"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">All</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
<!-- Classic button -->
<a href="#" class="btn btn-mini" title="New">
<i class="icon-plus-sign"></i>
</a>
<!-- Classic button -->
<a href="#" class="btn btn-mini" title="Import">
<i class="icon-upload"></i>
</a>
<!-- Dropdown in the middle of the button group -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Export">
<i class="icon icon-download"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">.csv file</a></li>
<li><a href="#">.json file</a></li>
<li><a href="#">.ods file</a></li>
<li><a href="#">.xml file</a></li>
<li><a href="#">.sql file</a></li>
</ul>
</div>
<!-- Dropdown at the end of the button group -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Another action">
<i...
CSS
/*
Twitter Bootstrap CSS modifications for having dropdown menus in
buttons groups.
Dropdowns menus are well positionned, under their buttons.
LESS code at bottom
Kure2012.
*/
.btn-group.group-dropdown {
margin: 0px;
padding: 0px;
margin-left: -1px;
}
.btn-group.group-dropdown .dropdown-toggle {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group.group-dropdown:first-child {
margin: 0px;
padding: 0px;
margin-right: -1px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle.btn-large {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group.group-dropdown:last-child {
margin: 0px;
padding: 0px;
margin-left: -1px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle.btn-large {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
/* And the LESS Code :
.btn-group{
&.group-dropdown{
margin:0px;
padding:0px;
margin-left:-1px;
.dropdown-toggle{
.border-radius(0);
}
&:first-child{
margin:0px;
padding:0px;
...