Twitter Bootstrap：在导航栏中选择元素

Question

我遇到了在引导导航栏中排列<select>元素的问题。我希望“搜索”中的文字一直到“Go！”按钮垂直对齐。看起来按钮和选择元素的高度相同，所以我希望它们在顶部和底部齐平。

这是代码：

<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>

这是一个带示例的jsFiddle。 http://jsfiddle.net/jefe317/EjS6f/2/

Firefox和Chrome都显示类似的结果

Answer 1

Rohit的答案有点作品，但可以将文字偏离中心一点点。您还可以从选择中删除边距底部：

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

即使一切都应该出来。

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

Answer 2

的 Demo 的

您好 @Jeff Lange 现在定义按钮 margin-top:0;和添加到 vertical-align:top;

就像这样

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

的 Demo 的

Answer 3

我遇到了类似的问题，但我修复了它：

<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>