ブートストラップで同じサイズの複数のdivを整列する

Question

2つ以上の要素を同じ行の同じサイズに整列させるには、「+」で動的に行を作成し、他の行は「表示： inline-flex; width：100％ "となりますが、"最初の行 "がインラインフレックスの場合、その行が壊れてしまい、さらに行をクリックすると、同じ行になりません ：

第一ライン

私は動的にいくつかの行を生成した後

   <select class=" col-sm-5"> 
        <option> - Select Component - </option> 
       </select> 

       <input class="col-sm-2 col-sm-offset-2" type="text" name="mytext[]"> 

       <div class="btn btn-default col-sm-1 col-sm-offset-2 add_field_button"><span class="glyphicon glyphicon-plus"></span></div> 

jQueryの

$(document).ready(function() { 
    var max_fields = 5; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 

    console.log(add_button); 

    add_button.click(function (e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment 
      wrapper.append('<div style="display: inline-flex; width: 100%; " class="input_fields_wrap">\ 
       <select class=" col-md-5">\ 
        <option> - Select Component - </option>\ 
       </select>\ 
       <input class=" col-md-2 col-md-offset-2" type="text" name="mytext[]">\ 
       <button class="btn btn-default col-md-1 col-md-offset-2 remove_field"><span class="glyphicon glyphicon-trash"></span></button>\ 
     </div>' 
        ); 
     } 
    }); 
    wrapper.on("click", ".remove_field", function (e) { //user click on remove glyphicon 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     x--; 
    }); 
}); 

Answer 1

使用12列がをDIVといくつかのdivでそれを分割し、このHTML構造：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-12 col-sm-12 col-xs-12"> 
 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
 
     <select class="form-control"> 
 
      <option>Option 1</option> 
 
      <option>Option 2</option> 
 
      <option>Option 3</option> 
 
      <option>Option 4</option> 
 
     </select> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
 
     <button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button> 
 
    </div> 
 
</div>

Answer 2

使用

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="row"> 
 
     <div class="col-sm-4"> 
 
      <select class="form-control"> 
 
       <option>Option 1</option> 
 
       <option>Option 2</option> 
 
       <option>Option 3</option> 
 
       <option>Option 4</option> 
 
      </select> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" name="" class="form-control"> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button> 
 
     </div> 
 
    </div>