bootstrapを使用して検索ボックスを作成する

プロジェクト開発では、検索オプションを多かれ少なかれ使用します.
では、どのようにして標準的な検索ボックスを作成するか、bootstrapが持っているコントロール-input-groupをお勧めします.
このコントロールはbootstrapの中国語のネット上で説明していないので、公式のドキュメントを見に行く必要があります.
input-group
まず、このコントロールの公式の説明を簡単に見てみましょう.

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

私たちが普段使っているフォーム提出機能に対して、ボタンやテキストを入力欄の両側の位置に追加することができますが、実は簡単です.
次のContentsの7つの内容は彼が実現できるいくつかの基本的な機能です.ここでは4番目のbutton addonsに注目すればいいです.他に興味があれば自分で勉強することができます.

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

上記の言葉は、inputグループのbuttonが普通とは異なり、異なるネスト階層が必要であることを意味します.簡単に言えばinput-group-addonを使わずに
input-group-btnはボタンを管理する.私が与えたdemoコードは以下の通りです.

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder=" " / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search"> </button>
               <button class="btn btn-info btn-search" style="margin-left:3px"> </button>
            </span>
 </div>

最後に現れた効果は以下の通りです.
これにより、検索バーのオプションが完璧に表示され、スタイルが一致します.