twitter-bootstrap - アドオンで 3 つのグリフィコンをブートストラップする

Question

ベローは、アドオンのグリフィコンの (Jade での) 私の HTML です。

.input-group
    input.form-control(type='text')
    span.input-group-addon.glyphicon.glyphicon-calendar

ただし、アドオンは入力フィールドと一致していません。スクリーンショット:

ブートストラップ 3 の正常またはバグですか?

アップデート

わかりました：bootstrap.css：2171（lessでコンパイル）

.glyphicon{ ...; top: 1px; ...}

バグ？

Answer 1

Bass の答えを明確にするために、現在のバージョンの Bootstrap 3 では、次のことを行う必要があります。

<div class="input-group input-group-lg">
  <input type="text" class="form-control">
  <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
</div>

つまり、ドキュメントに記載されている基本的な Bootstrap マークアップだけです。

Answer 2

ローカルオーバーライド:

<style type="text/css">
    .glyphicon {
        top: 0;
    }
</style>

Answer 3

<div class="input-prepend input-append">
    <span class="add-on"> <i class="icon-user"></i></span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on"> <i class="icon-envelope"></i></span>
</div>

Answer 4

<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>

Answer 5

ボタン内に html コード ' ' を配置します。