Twitter Bootstrap's navbar with split buttons
navbar, split, twitter-bootstrap
Solution
Font Awesome page has exactly, what I've been looking for, without need to put extra code or CSS.
I'm reffering to "Icons" and "Example" buttons that are perfect split buttons dropdowns, i.e. it can be clicked as single button, and you can open dropdown next to it, without touching the main button.
However, this is done via separate elements, which means huge space between main button and dropdown arrow.
Here is a Bootply example, that replicates this code and this behaviour.
Problem
Is there any (fairly easy) way to get Twitter Bootstrap's navbar filled with split button dropdowns? I'm looking for any way to separate so called main button from a dropdown menu containing items that belongs to that main button or are somehow related to it. I tried to add two navbar items per each one -- first containing only main button (with caption and icon) and second containing only dropdown (without caption and icon): But result is not much acceptable. Mainly because: - only one part (of two pretending one button) is hovered with mouse, - there is a visual gutter between so called main button and its fake dropdown, - Bootstrap has some small bug (I think), that causes it to not hover entire area below down arrow, when an item lacks caption and icon. Are there any other options, possibilities or workarounds for this problem? Or am I expecting too much?