3

<select>ブートストラップナビゲーションバーに要素が並んでいるという問題があります。「Searchfor」から「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の両方で同様の結果が表示されます

ここに画像の説明を入力してください

4

3 に答える 3

2

Rohitの答えは一種の作品ですが、テキストを少し中心から外すことができます。選択からmargin-bottomを削除することもできます。

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

それでもすべてがうまくいくはずです。

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

于 2012-11-16T06:06:18.813 に答える
0

デモ

こんにちは@JeffLangeここで、ボタン 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 に答える