5

私は Twitter Bootstrap を初めて使用し、その使用方法を手探りし始めています。フレームワークの特定の側面が理にかなっていますが、私はまだフォームのスタイリングに苦労しています。を使用してスタイル設定された要素を持つフォームのいくつかの異なるセクションをセットアップしようとしています.form-inline。そのような例の 1 つで、私は.input-appendほとんど運がなくても使用しようとしています。

<div class="row">
    <div class="well span12">
        <div class="row">
            <div class="span12 form-inline input-append">
                <label for="assetSearch">Asset Search</label>
                <input type="search" id="assetSearch" placeholder="">
                <span class="add-on"><i class="icon-search"></i></span>
            </div>
        </div>
        <div class="row">
            <div class="span12 form-inline">
                <label for="service">Service</label>
                <input type="text" id="service" autocomplete="off" />
            </div>
        </div>
    </div>
</div>

上記のマークアップは次のようにレンダリングされます。

上記のマークアップのレンダリング方法のスクリーンショット

ご覧のとおり、「Asset Search」はフォーム入力とインラインではありません。.input-append含まれている div からクラスを削除すると、並べ替えが行われます。ただし、検索アイコンはテキスト ボックスに埋め込まれなくなり、代わりにテキスト ボックスの右側に表示されます。

.form-inlineと一緒に使用するにはどうすればよい.input-appendですか?

4

2 に答える 2

1

s、s、またはsinput-append以外のものを a (または先頭に追加) に入れてはいけません(これは網羅的ではないかもしれません)。inputbutton.add-on

全体を a にラップしてdiv.input-append、.form-inlineハンドルをフローティングにします: Demo on jsfiddle

<div class="span12 form-inline">
    <label for="assetSearch">Asset Search</label>
    <div class="input-append">
        <input type="search" id="assetSearch" placeholder="" />
        <span class="add-on"><i class="icon-search"></i></span>
    </div>
</div>
于 2013-02-16T00:54:12.777 に答える
0

これは、作業アラインメントのフィドルです: http://jsfiddle.net/Jeff_Meadows/xGRtL/

2 つの修正は、 classvertical-alignの<label>要素内に要素を設定することと、要素の を 14px.input-appendにリセットすることです (ブートストラップの別の場所で 0 に設定されています)。font-sizeに基づいてルールを作成するのではなく.input-append、包含要素に追加できる新しいクラスを作成しました。そうすれば、他の場所で予期しない結果が得られることはありません。

.input-prepend label, .input-append label {
    vertical-align: middle;
}
.fix-text-spacing {
    font-size: 14px;
}
于 2013-02-16T00:23:57.277 に答える