ブートストラップ：入力をボタンに合わせる

299

Bootstrapでボタンと入力がうまく一致しないのはなぜですか？

私は次のような簡単なことを試しました：

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

ボタンは5px、chrome / firefoxの入力よりも約低いです。

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

css  twitter-bootstrap 
— pguardiario
ソース

回答:

551

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">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitterブートストラップ3

@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によって提供された回答に賛成票を投じてください。

Twitterブートストラップ2

Bootstrapは、.input-appendラッパー要素として機能し、これを修正するクラスを提供します。

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

@OleksiyKhilkevichが彼の回答で指摘したように、クラスを調整inputしbuttonて使用する2つ目の方法があります.form-horizontal。

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

違い

この2つのクラスの違いは、それがある.input-append配置しますbutton立てかけinput（彼らが見えるように、それらが結合しているような）要素を、どこ.form-horizontalそれらの間にスペースを配置します。

- 注意 -

inputとbutton要素を間隔を空けずに隣同士にできるようにするfont-sizeため0に、は.input-appendクラスでに設定されています（これにより、inline-block要素間の白い間隔が削除されます）。これinputを使用してデフォルトを上書きしemたり、%測定値を上書きしたりする場合は、要素のfont-sizesに悪影響を与える可能性があります。

— 頭が痛い
ソース
5
回答ありがとうございます。ここで問題が発生しているようです。確かに、ブートストラップコンポーネントがフォーム要素と並んでいることを望んでいる最初の人物ではありません。
— pguardiario 2012年
@pguardiario-あなたは完全に正しいです。それは間違っているようでした、そして私の頭をたたいた後、私は.input-appendクラスを思い出しました。
— 私の頭は2012年
1
これを行うためにラッパークラスが必要になるのは奇妙に思えます。彼らはデフォルトで並んでいるべきではないのですか？
— opsb 2012
2
@opsb垂直方向のスペースが同じである場合は、そうです。ただし、Twitterブートストラップの入力フィールドにはa margin-bottom: 9pxがありますが、ボタンにはないため、同じ垂直方向のスペースを占めません。両方の要素にはmiddle垂直方向の配置があるため、ボタンはその違いによりオフセットされます。.input-appendラッパーを使用すると、このマージンボトムの値が削除されます。
— 私の頭は2012
右、他のフォームレイアウトがデフォルトで同じ縦の高さである場合、他のフォームレイアウトが壊れると思います。
— opsb 2012
187

あなたは使用することができ、入力グループボタンのプロパティを入力フィールドへのダイレクトボタンを適用します。

ブートストラップ3＆4

<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><!-- /input-group -->

さらに多くの例については、BS4入力グループドキュメントをご覧ください。

bs3入力グループボタンの例

— カールアドラー
ソース
3
他のものは私にとってはうまくいきませんでしたが、これは私が望んだ方法でうまくいきました。ありがとうございました。
— Colandus 2014
1
私にとっては、割り当てられたクラスに余分spanタグを作成する場合は動作しませんでしたが、私はdivタグにそのクラスを追加した場合、それが働いた：<div class="form-group input-group-btn">
— J0ANMM
この回答はBS4には古くなっています。私の回答を見てください。
— Alexander Kim
37

ただのヘッドアップ、これと呼ばれる特別なCSSクラスがあるようです form-horizontal

input-appendには、font-sizeをゼロに落とすという別の副作用があります。

— オレクシー・キルケビッチ
ソース
1
+1の良い点-私は彼らがなぜfont-size: 0新しいものを使用し、学んだのかを調査しなければなりませんでした:)ありがとう！
— 2013年
30

.form-inline =これを使用すると、コンパクトなレイアウトのラベルとインラインブロックコントロールが左揃えになります

例：http : //jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizo​​ntal =ラベルを右揃えし、左にフロートして、コントロールと同じ行に表示されるようにします。これは、2列のフォームレイアウトに適しています。

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

例：http : //twitter.github.io/bootstrap/base-css.html#forms

— ジーシャン・アーシャッド
ソース
2
form-inlineBootstrap 3 で動作することを確認できます。ありがとうございます。
— オースティン2014年
素晴らしい！面倒なフォームに必要なもの！
— its_notjack 2015年
.form-inlineは、少なくとも768ピクセル幅のビューポート内でのみ機能するようです：w3schools.com/bootstrap/bootstrap_forms.asp
— anemaria20
16

私は何よりも試してみましたが、共有したい変更がいくつかありました。これは私のために働くコードです（添付のスクリーンショットを見つけてください）：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

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

それが機能することを確認したい場合は、エディタで以下のコードを使用してください：

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

お役に立てれば。

— あびまにゅ
ソース
これはどのBootstrapバージョンですか？そしてそれはそれを使用しない原因となる問題はstyle="width:0;"何ですか？
— Karl Adler
width：0を使用しない場合は、ページの全幅が使用されます。
— Abhimanyu 2016年
ブートストラップの方法は、<div class="col-md-4">必要なしのようなcol要素でラップすることになるwidth: 0
— Karl Adler
入力コントロールで画面の幅いっぱいに表示したくないので設定しました
— Abhimanyu
6

私も同じ問題で苦労していました。私が使用するブートストラップクラスは、私には機能しません。私は次のような回避策を考え出しました：

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

基本的に、「フォームコントロール」クラスの表示プロパティをオーバーライドし、サイズと位置を修正するために他のスタイルプロパティを使用しました。

結果は次のとおりです。

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

— ビカシュビシュヴォカルマ
ソース
4 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
— 阿修デザイナー
ソース
3

上記のコードをすべて試しましたが、どれも私の問題を修正しませんでした。ここに私のために働いたものがあります。input-group-addonを使用しました。

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>
— クパフ
ソース
1

直接関係はありませんが、同様のコードがない限り、フォームインラインのブートストラップ3.3.7の奇妙な動作に気づきました。

開始タグがテーブルの下にある場合（この場合）、デスクトッププロジェクトであるため、行とセルを使用しませんでした。

<table class="form-inline"> 
<form> 
<tr>

フォーム要素はスタックします。

スイッチとそれが正しく並んでいます。

<form>
<table class="form-inline">
<tr>

Safari 10.0.2と最新のChromeでは違いはありませんでした。多分私のレイアウトは間違っていましたが、それは非常に寛容ではありません。

— トロンド
ソース
1

入力フロートを左に取ります。次に、ボタンを取り、それを右に浮かせます。1つ以上の距離を取るときにクラスをクリアすることができます。 

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>
— rashedcs
ソース
-1 
style="padding-top: 8px"

これを使用して、divを行内で上下にシフトします。作品は私にとって不思議です。

— ザック・J
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.