Twitter Bootstrap inline input with dropdown

Question

I\'m trying to display a text input inline with a dropdown button. I can\'t figure out how to do this though. Here\'s the HTML I\'ve tried (I\'ve put all of it on a single

Answer 1

Current state: default implementation in docs

Currently there is a default implementation of input+dropdown combo in the documentation here (search for "Button dropdowns"). I leave the original solution for the record and for those who cannot use solution now included in the documentation.

Original solution

Yes, it is possible. As a matter of fact, there is one example in the Twitter Bootstrap documentation (follow the link and search "Examples" for dropdown buttons):

    
         User
    
    
        
    
    

        
 Edit
        
 Delete
        
 Ban
        

        
 Make admin
    

If enclosed within text, it can look like this (with text on the button changed, nothing else):

EDIT:

If you are trying to achieve with appended dropdown menu as in the dropdown buttons, then this is one of the solutions:

1. Add a btn-group class to the element that has input-append class,
2. Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append,
3. Override style for element matching .input-append .btn.dropdown-menu so it does not have float: left (otherwise it will get into next line).

The resulting code may look like this:

    
    
        
    
    

        
 Edit
        
 Delete
        
 Ban
        

        
 Make admin
    

with a little support from this style override:

.input-append .btn.dropdown-toggle {
    float: none;
}

and give you the exact same result as this:

EDIT 2: Updated the CSS selector (was .dropdown-menu, is .dropdown-toggle).