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

Twitter Bootstrap: Select element in Nav bar

提问by Jeff Lange

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.

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

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/

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

Both Firefox and Chrome show similar results

Firefox 和 Chrome 显示相似的结果

采纳答案by David Fritsch

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:

Rohit 的回答有点奏效，但可以将文本稍微偏离中心。您还可以从选择中删除边距底部：

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

That should even everything out.

那应该甚至一切都出来了。

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

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

回答by WarrenV

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>

回答by Rohit Azad

Demo

演示

Hi @Jeff LangeNow define your buttonmargin-top:0;and add tovertical-align:top;

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

As like this

像这样

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

Demo

演示