CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Jeff Lange
Jeff Lange

Reputation: 211

Twitter Bootstrap: Select element in Nav bar

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

enter image description here

Upvotes: 3

Views: 20709

Answers (3)

WarrenV
WarrenV

Reputation: 230

I had a similar problem but I fixed it with:

<select class="span2 navbar-btn">
    <option>Things</option>
</select> in 
 <select class="span2 navbar-btn">
   <option>City, NY</option>
</select>
<button type="button" class="btn btn-default navbar-btn">Go!<button>

Upvotes: 0

David Fritsch
David Fritsch

Reputation: 3731

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/

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Demo

Hi @Jeff Lange Now define your button margin-top:0; and add to vertical-align:top;

As like this

.btn.btn-primary{
margin-top:0 !important;
    vertical-align: top;
}

Demo

Upvotes: 0

Related Questions