ブートストラップ：ドロップダウンは、新しい行に

Question

を行くことはありません、私は、フォームを作成しようとしていますが、何らかの理由で私は、複数のドロップダウンが正しく、他の下に1を表示することができません。ここに私のコードは次のとおりです。

  <div class="form-group" style="display: block;"> 
      <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
         id="step1.1"> 

        <option value="1">1</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group" style="display: block;"> 
      <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
         id="step1.2"> 

        <option value="2">2</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div> 

私は私が間違ってやっているのか分からない...

Answer 1

ブートストラップを使用しているため、グリッドシステムには12個の列があります。したがって、次の行、つまり他の行の下にドロップダウンを正しく表示するには、12行すべてを完了する必要があります。

コードでは、ラベルに3列（col-md-3）、選択ボックスに4列（col-md-4）を使用しています。従って合計は3 + 4 = 7であり、残りの5つの列が残るためである。だからではなく、COL-MD-4を使用するのでは、グリッドを完了するために、COL-MD-9を使用し

ここで正しいコード行く： - 、ブートストラップは、12列のレイアウトを使用しています

<div class="form-group" style="display: block;"> 
 
\t <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.1"> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div> 
 
<div class="form-group" style="display: block;"> 
 
\t <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.2"> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>

Answer 2

は、ここではそれを行うことができ、2つの方法です：私はあなたが望んでいたかはわからないhttp://pastebin.com/XivnbbHE

要素が互いにインラインになっているか、または1つが他の要素の上にあるので、私は両方を含めました。これを達成するには、ブートストラップクラスinlineまたはform-inlineを使用できます。最初のものでは、選択肢は非常に狭いです。あなたはそれを修正することができます。

Answer 3

をブートストラップグリッドの例を参照してください。here

あなたの場合、ラベルはcol-md-3、入力はcol-md-4となりますので、7グリッドになります。 col-md-4とcol-md-8または12グリッドを完成させるものを使用してください。同じですsmとxs

グリッドを確認するには、http://shoelace.ioを試してみてください。