34

icon-searchTwitter Bootstrap アイコンをテキスト入力要素の右側に追加するにはどうすればよいですか?

次の試行では、input 要素内にすべてのアイコンを配置しましたicon-search。

現在の試行

ここに画像の説明を入力

CSS

input.search-box {
    width: 180px;
    background: #333;
    background-image: url('/img/glyphicons-halflings-white.png');
    background-position: -48px 0;
    padding-left: 30px;
    margin-top: 45px;
    border: 0;
    float: right;
}
4

6 に答える 6

91

更新されたブートストラップ 3.x

.input-group次のようにクラスを使用できます。

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

3.x の jsFiddle で動作するデモ

ブートストラップ 2.x

.input-append次のようにクラスを使用できます。

<div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        <i class="icon-search"></i>
    </button>
</div>

2.x の jsFiddle で動作するデモ

どちらも次のようになります。

外のスクリーンショット

入力ボックス内にアイコンが必要な場合は、次のようにします。

内部のスクリーンショット

次に、入力ボックスにブートストラップ グリフィコンを追加するための私の回答を参照してください。

于 2013-06-01T18:00:41.940 に答える
1

glyphicons 画像はスプライトであるため、実際にはそれを行うことはできません。基本的に必要なのは背景のサイズを制限することですが、背景の大きさを指定する方法はありません。必要なアイコンを切り取り、サイズを小さくして使用するか、入力フィールドの前に追加/追加するオプション ( http://twitter.github.io/bootstrap/base-css.html#formsなど) を使用してから検索しますプリペンド入力の場合)。

于 2013-06-01T17:41:35.910 に答える