このような入力コンポーネントをブートストラップを使って組み合わせることはできますか？

Question

私は今このようなフォームを構築しようとしています。 list group

しかし、私は、リストのグループのように入力コンポーネントを組み合わせることができ、私は疑問に思う：

が、私はそこlist-groupコンポーネントとinput-groupコンポーネントであるた（2つの入力コンポーネントを組み合わせますか）？

ありがとうございます。

Answer 1

ブートストラップクラスはどの要素でも使用できます。通常、その名前は単なる提案です。クラスがlist-groupと呼ばれているからといって、同じエフェクトの入力には適用できないというわけではありません。

これらのクラスは、要素の機能やセマンティクスではなく、視覚的な外観を定義するため、視覚的にわかりやすい方法で自由に組み合わせてください。

例えば、

<form name="somename" action="someaction" class="list-group"> 
    <input class="list-group-item" name="email" type="email" placeholder="email"> 
    <input class="list-group-item" name="password" type="password" placeholder="password"> 
</form> 

は、予想通り、有効と表示します。入力がどのようにスタイル化され、1つの行に複数の要素を追加するかを制御するには、次のようにdiv内の入力を入れ子にすることができます。

<form class="list-group"> 
    <div class="list-group-item"> 
    <input type="text" placeholder="email"> 
    </div> 
    <div class="list-group-item"> 
    <input type="text" placeholder="password"> 
    </div> 
</form> 

Answer 2

私はあなたが単にフォーム入力にリストグループ・アイテム・クラスを与えることができると信じて：

<div class="list-group"> 
    <input class="list-group-item" type="text" /> 
    <input class="list-group-item" type="text" /> 
    </div> 

このjsFiddleを参照してください。