2

TwitterのBootstrapを使用して、入力フィールドと先頭にアイコンが追加されたフォームがあります。

<div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span>
  <input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

そしてこれが結果です：

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

現時点では、BootstrapのCSSを変更していません。例では、アイコンと入力フィールドの間にそのようなスペースはありません。どうすればそれを取り除くことができますか？

4

1 に答える 1

6

自分で見つけてください：アイコンマークアップとinput：の間の線を壊さないでください

<div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span><input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

Twitter自体がアイコンのドキュメントで説明しているように：

ボタンやナビゲーションリンクのように、テキストの文字列の横で使用する場合は、適切な間隔を空けるために、タグの後にスペースを入れてください。

それが私の手がかりでした。

于 2012-07-30T12:02:36.763 に答える