3

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

这是代码： 

<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 都显示相似的结果

在此处输入图像描述

4

3 回答 3

2

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

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

那应该连一切都解决了。

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

于 2012-11-16T06:06:18.813 回答
0

演示

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

像这样

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

演示

于 2012-11-16T05:55:49.610 回答
0

我有一个类似的问题，但我用以下方法解决了它：

<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>
于 2014-09-21T03:58:35.687 回答