Question

I am having issues with <select> elements lining up in a bootstrap nav bar. I want the text from “Search for” all the way to the “Go!” button to be vertically aligned. It looks as if the button and selection elements are the same height, so I want them to be flush on the top and bottom.

Here’s the code:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Project</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
            </ul>
            <form class="navbar-search pull-right">
                <div>Search for 
                    <select class="span2">
                        <option>Things</option>
                    </select> in 
                    <select class="span2">
                        <option>City, NY</option>
                    </select>
                    <button type="button" class="btn btn-primary">Go!</button>
                    </div>
                </form>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

Here’s a jsFiddle with an example. http://jsfiddle.net/jefe317/EjS6f/2/

Both Firefox and Chrome show similar results

Answer 1

Rohit’s answer kind of works but can leave the text off center a little. You can also remove the margin-bottom from the select:

select[class*="span"] {
    margin-bottom: 0;
}

That should even everything out.

http://jsfiddle.net/EjS6f/5/