インラインフォーム内の入力グループの使用

Question

input-groupをform-inlineに追加すると、input-groupは、フォームの下に他のコントロールのインラインではなく新しい行に表示されます。

正常に動作し、他の入力は、inline-blockに自分displayセットを持っているのに対し、input-groupラッパークラスがtableにdisplayセットを持っているためであると思われます。もちろん、子のadd-onスパン（display: table-cellを含む）は正しく配置するために親のプロパティを必要とするため、input-groupにinline-blockの表示を与えることはできません。

だから私の質問は：それは排他的にブートストラップクラスを使用して、インラインフォーム内input-groupを使用することは可能でしょうか？そうでない場合は、のカスタムクラスを使用できるようにするには、どのような方法が最適ですか。

ここに私の要点を示すdemoがあります。コードは次のとおりです。

<form action="" class="form-inline"> 
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> 

    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> and Checkboxes 
     </label> 
    </div> 
    <select class="form-control" style="width: 150px;"> 
     <option>and Selects</option> 
    </select> 

    <button type="submit" class="btn btn-default">and Buttons</button> 
    <div class="input-group" style="width: 220px;"> 
     <span class="input-group-addon">BUT</span> 
     <input type="text" class="form-control" placeholder="not with input-groups" /> 
    </div> 
</form> 

Answer 1

これは実際にはバグで、解決されました（詳細はissue on githubを参照）。

これ以降、BootStrapのインラインフォームでは、子フォームコントロールを.form-groupでラップする必要があります。

だから私のコードはなる：

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    </div> 

    ... 
    <div class="form-group"> 
     <div class="input-group" style="width: 220px;"> 
      <span class="input-group-addon">BUT</span> 
      <input type="text" class="form-control" placeholder="not with input-groups" /> 
     </div> 
    </div> 
</form> 

Answer 2

私はあなたが必要とするインラインレイアウトを得るためにフォームを列に分割する必要があるかもしれないと思います。ブートストラップサイトhereに例があります。

は、私が何を意味するか見るためにあなたのコントロールの周り

<div class="col-lg-1"></div> 

を入れてみてください。もちろん、12桁の列で作業する必要がありますので、これに合わせて調整する必要があります。