Bootstrap でボタンと入力がうまく揃わないのはなぜですか?
私は次のような簡単なことを試しました:
<input type="text"/><button class="btn">button</button>
ボタンは、5pxChrome/Firefox の入力よりも下にあります。
ベストアンサー1
Twitter ブートストラップ 4
Twitter Bootstrap 4では、入力とボタンはクラスinput-group-prependとinput-group-appendクラスを使って整列させることができます（https://getbootstrap.com/docs/4.0/components/input-group/#button-addons）
左側のグループボタン（先頭に追加）
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
右側のグループボタン（追加）
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Twitter ブートストラップ 3
@abimelexの回答に示されているように、入力とボタンは.input-groupクラスを使用して整列させることができます（http://getbootstrap.com/components/#入力グループボタン）
左側のグループボタン
<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 が提供した回答。
Twitter ブートストラップ 2
Bootstrap は.input-append、ラッパー要素として機能し、これを修正するクラスを提供します。
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
@OleksiyKhilkevich が回答で指摘しているように、クラスを使用して位置合わせinputする2 番目の方法があります。button.form-horizontal
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
違い
これら 2 つのクラスの違いは、 は要素に対して.input-append配置し(接続されているように見える)、 は要素間にスペースを配置することです。buttoninput.form-horizontal
- 注記 -
input要素とbutton要素を間隔を空けずに隣り合わせに配置できるようにするために、 クラスの が にfont-size設定されています(これにより、要素間の空白が削除されます)。または の測定値を使用してデフォルトを上書きする場合、これは 要素のフォント サイズに悪影響を及ぼす可能性があります。0.input-appendinline-blockinputem%