bootstrapでボタンや入力がうまく配置されないのはなぜですか? といったシンプルなものを試してみました。
<input type="text"/><button class="btn">button</button>
chrome/firefoxでは、ボタンは入力よりも約5px低い位置にあります!画像の説明をここに入力。
abimelexさんの回答にあるように、入力やボタンは.input-group
クラスを使って整列させることができます(http://getbootstrap.com/components/#input-groups-buttons 参照)。
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
このソリューションは、私の回答を最新の状態に保つために追加されたものですが、@abimelexさんが提供した回答にup-voteをお願いします。
といったところでしょうか。
Bootstrapには、.input-append
クラスがあり、これがラッパー要素として機能し、修正してくれます。
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
OleksiyKhilkevich氏の回答でも指摘されていますが、.form-horizontal
クラスを使用してinput
とbutton
を整列させる2つ目の方法があります。
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
この2つのクラスの違いは、.input-append
では button
が input
要素とくっついているように見えるのに対し、.form-horizontal
では両者の間にスペースが置かれることです。
--注意 --
input
と button
要素を間隔を空けずに隣り合わせにできるようにするために、.input-append
クラスでは font-size
を 0
に設定しています (これにより、inline-block
要素の間の白い間隔がなくなります)。これは、em
や%
の計測値を使ってデフォルトをオーバーライドしたい場合に、input
要素のフォントサイズに悪影響を及ぼす可能性があります。Use .form-inline = ラベルやインラインブロックのコントロールを左寄せにして、コンパクトなレイアウトにします
例:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = ラベルを右寄せにして左にフロートさせ、コントロールと同じ行に表示させるので、2カラムのフォームレイアウトに適しています。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)