33

Bootstrap 3 入力グループで奇妙な動作を実験しています。ジャンボトロン内のフォームに入力グループ アドオン (テキストまたはアイコン) を追加すると、入力グループの高さが入力の高さより大きくなります。

ここでは、JsFiddle と問題のあるスクリーンショットを見つけることができます。

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

http://jsfiddle.net/DTcHh/の実際の例

スクリーンショット:ここに画像の説明を入力

この問題を解決するにはどうすればよいですか? Bootstrap ソリューションを探していますが、それが不可能な場合は、CSS ルールで修正するのを手伝っていただければ幸いです。

4

10 に答える 10

35

昨夜、私はまったく同じ問題を抱えていました。上記の修正はどれも私のコンテキストでは機能しませんでした。最終的に何をしたかは、マージンを 0 に設定することでした。

.input-group .form-control {
    margin: 0px !important;
}

おそらく、これは同様の問題を抱えている人に役立ちます！

于 2014-06-14T10:29:23.573 に答える
21

input-group-lgブートストラップの解決策は、含まれているクラスを追加することです<div>-ドキュメントに示されているように<input>、アドオンはまだ入力よりわずかに大きいので、一致するように高さを調整できます。5 px を追加しました。

http://jsfiddle.net/DTcHh/21/

于 2013-09-02T15:45:11.490 に答える
2

Adrift が示唆するように Bootstrap のドキュメントを見ると、元のコードは完全に有効に見えます。LARGE が必要な場合は input-group-lg クラスを追加することは素晴らしいことですが、そうでない場合は間違っています。IE9 を使用し、自分の開発環境と Adrift の jsfiddle の両方でコードを実行すると、input-group-lg クラスの有無にかかわらず (私にとっては) 正しく動作しますが、もちろんそれを使用すると大きくレンダリングされます。おそらくブラウザ固有の問題??

そうは言っても、選択ピッカーの前にラジオボタンを追加しようとして、同様の問題が発生しています。しかたがない...

于 2013-09-20T16:07:09.653 に答える
0

id="search_button"ボタンに追加して修正しました：

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

次に、ボタンに次のスタイルを適用しました。

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

それで全部です。

于 2015-09-14T15:41:19.847 に答える
-2

入力を大きくする代わりに、スパン (input-group-addon) を小さくします。そのためには、パディングを低くします。そう：

.input-group-addon {
    padding: 0px 6px;
}
于 2016-11-29T23:01:27.690 に答える