検索ボックスと提出ボタンがブートストラップ3に付いています

Question

私はColorLibのGentellelaテンプレートに基づいたプロジェクトを持っています。一番上の検索バーはインラインでスタイルが設定されていますが、フォームではありません。私のビューに検索を提出するコードを追加すると、submit（ "Go"）ボタンが次の行に移動します。

スタイルを維持しながらこれを達成する最良の方法は何ですか？

オリジナルのコードはテンプレート（sans form tags）です。

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> 
    <div class="input-group"> 
    <input type="text" class="form-control" placeholder="Search for..."> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
    </span> 
    </div> 
</div> 

私の最新の試み

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> 
    <form action="" method="post" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search for...">      
    </div> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit">Go!</button> 
     </span> 
    </form> 
</div> 

いつものように、私はすべてのヘルプ、提案やコメントを感謝しています。

Answer 1

内の入力フィールドとボタンをinput-groupクラスのdivにネストすることをお勧めします。これはhow input groups are made on Bootstrapです。

コンポーネントをインラインに保持するために、display:inline-tableスタイルが適用されます。

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> 
    <form action="" method="post" class="form-inline"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit">Go!</button> 
     </span> 
     </div> 
    </div> 
    </form> 
</div>