321

Bootstrap でボタンと入力がうまく整列しないのはなぜですか?

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

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

ボタンは5pxchrome/firefox の入力よりも低い位置にあります。

ここに画像の説明を入力

4

12 に答える 12

592

Twitter ブートストラップ 4

input-group-prependTwitter Bootstrap 4 では、および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/#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に配置され(したがって、それらが結合されているように見えます)、 がそれらの間にスペースを配置することです。buttoninput.form-horizontal

- ノート -

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

于 2012-05-16T09:52:14.517 に答える
38

注意してください、これには特別なCSSクラスがあるようですform-horizontal

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

于 2012-12-06T23:10:47.837 に答える
17

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

<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>

お役に立てれば。

于 2016-01-06T11:55:11.890 に答える
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>

基本的に、クラス "form-control" の display プロパティをオーバーライドし、他のスタイル プロパティを使用してサイズと位置を修正しました。

結果は次のとおりです。

ここに画像の説明を入力

于 2016-08-11T01:00:03.330 に答える
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>
于 2016-02-10T11:58:48.910 に答える
3

上記のコードをすべて試しましたが、どれも問題を解決しませんでした。これが私のために働いたものです。入力グループアドオンを使用しました。

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>
于 2016-06-09T13:15:34.960 に答える
-1 
style="padding-top: 8px"

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

于 2014-09-18T19:35:30.230 に答える