ブートストラップボタンが入力フィールドに並んでいません

Question

glyphicon-searchボタンがブートストラップに並んでいるのに問題があります。 これはユニークな問題ではありませんが、受け入れられて有名な答えが私のために働いていないことを除いて、同様のことを尋ねるthis questionが見つかりました。ただ、答えのように、私はフィールドを並べる必要があるのdiv入力グループラッパーを持っていますが、あなたは私のjsfiddleで見ることができるようにそれは、動作していない：面白い

http://jsfiddle.net/pk84s94t/

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button> 
    </span> 
    <input type="text" class="form-control input-sm"> 
</div> 

Answer 1

http://jsfiddle.net/kv8n7n5g/

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> 
    </span> 
    <input type="text" class="form-control" placeholder="Search"> 
</div> 

あなたは、ボタンタグ内glyphiconクラスを持っていました。

アイコンの線の高さを1に変更する必要があるかもしれません。私はioniconsを使用していましたが、1.4 ... line-heightはすべてを投げていました。

Answer 2

を。私はそのような入力グループのボタンを使用しようとしたことは一度もありません。その動作がなぜ発生しているのかわかりません。しかし、簡単に修正されているようだ。私はすでにposition: relative;を持っていた既存のルール.input-group-btn>.btnにtop:0を追加

...

http://jsfiddle.net/pk84s94t/1/

EDIT

これが動作を修正していますが、レイチェルSの答えは、として、より良いソリューションですCSSルールを変更するのではなく、ブートストラップ内の適切なHTMLを使用して問題を修正しています。

Answer 3

問題は、ブートストラップのグリフコンボタンのデフォルトサイズが原因です。しかし、ボタンにテキストを置くと、グリフコンのデフォルトよりもテキストのボタンが優先されるので、完全に整列します。私は& nbspを使ったテキストです。今はうまくいく。