css - ブートストラップ：入力ボックスとボタンにギャップがあるのはなぜですか？

Question

http://jsfiddle.net/TccN5/で私のコードを確認してください。

入力テキストボックスと右側のボタンの間にギャップがあります。Bootstrapサイトのまったく同じマークアップの場合、入力ボックスとボタンは隙間なくぴったりとフィットします。

なぜギャップがあるのですか？

Answer 1

と要素whitespace characterの間に余分なsがあります。要素の直後にタグを配置します。buttoninputbuttoninput

<input type="text" /><button class="btn" type="button">Any</button>

デモ1

または、次のcssスタイルを適用します。

​.input-append{
    font-size:0;
}​

デモ2

Answer 2

理由はわかりませんが、これが私が修正した方法です。多分あなたはあなた自身のcssのいくつかがテキストフィールドと衝突しているのを手に入れました。

これが修正されたjsfiddleですhttp://jsfiddle.net/TccN5/2/

追加しました

     style="margin-right:-4px"

あなたに

     <input type="text">

Answer 3

使用input-prependしてinput-append

<div class="btn-group input-prepend input-append">
    <input type="button" class="btn" value="Prev">
    <input type="text" value="">
    <input type="button" class="btn" value="Next">
<div>