コンボボックス付きの2番目の列

Question

私はこのスケッチを動作させようとしています。これで赤いものをプログラムする必要がありますsketch

私はangularJSとブートストラップを使用しています。これは、今のコードです：

<div class="col-md-6"> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <select name="" id="" ng-model="" ng-options=""> 
 
      <option value=""></option> 
 
     </select> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <select name="" id="" ng-model="" ng-options=""> 
 
      <option value=""></option> 
 
     </select> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <select name="" id="" ng-model="" ng-options=""> 
 
      <option value=""></option> 
 
     </select> 
 
    </div>        
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <input type="text" name="" id="" placeholder="" ng-model="" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <input type="text" name="" id="" placeholder="" ng-model="" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <input type="text" name="" id="" placeholder="" ng-model="" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <input type="text" name="" id="" placeholder="" ng-model="" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>text:</label> 
 
     <input type="text" name="" id="" placeholder="" ng-model="" /> 
 
    </div> 
 
</div> 
 

私は上記のコンボボックスで右隣のテキストフィールドと第二のカラムをプログラムする必要があります。 angularjs

敬具と多くのおかげで

1 =コンボボックス！

Answer 1

私はあなたがブートストラップを持っていると推測しているので、col-mdを使用しています。既に持っている列に別の行を入れ子にすることができます。

<div class="row"> 
    <div class="col-md-6"> 
     <!-- some inputs --> 

     <div class="row"> 
      <div class="col-md-6"> 
      </div> 

      <div class="col-md-6"> 
      </div> 
     </div> 

    </div> 
</div>