ブートストラップフォームインラインが機能しない

Question

コントロールが互いに隣り合うようにフォームインラインクラスを適用しながら簡単な検索フォームを追加しようとしていますが、コントロールが互いに上に表示され、誰かがここで私が何が欠けているか教えてください？ブートストラップ参照から

<div class="container"> 
    <div class="row"> 
      <div class="col-md-8"> 
       <form class="form-inline" action="#" method="post"> 
        Search<input type="text" id="search" name="search" class="input-small" placeholder="Search..."> 
        <select id="searchon" name="searchon"> 
         <option value="0">First Name</option> 
         <option value="1">Last Name</option> 
        </select> 
        <button type="submit" class="btn">Search</button> 
       </form>  
      </div>  
    </div> 
</div> 

Answer 1

、for inline forms :

これが唯一の少なくとも768px 幅でビューポート内のフォームに適用されます。

と限り、あなたのレイアウトに関しては、

<div class="container"> 
    <div class="row"> 
      <div class="col-md-8"> 
       <form class="form-inline" action="#" method="post"> 
        Search<input type="text" id="search" name="search" class="input-small" placeholder="Search..."> 
        <select id="searchon" name="searchon"> 
         <option value="0">First Name</option> 
         <option value="1">Last Name</option> 
        </select> 
        <button type="submit" class="btn">Search</button> 
       </form>  
      </div>  
    </div> 
</div> 

その完璧fine..inline：

working demo

Answer 2

私は、ブートストラップからのコードスニペットと同様の問題がありました。私は、2つのクラス 'コントロールグループ'と 'コントロール'がインラインで壊れていることがわかりました。 2つのクラスを削除して私のためにそれを修正しました。

<div class="control-group"> 
      <label class="control-label" for="Name">Name</label> 
      <div class="controls"> 
       <input type="text" id="Name" placeholder="Name"> 
      </div> 
     </div> 

：

  <label class="control-label" for="Name">Name</label> 

       <input type="text" id="Name" placeholder="Name">