Richten Sie viele divs mit gleicher Größe mit Bootstrap yii2

Question

Wie kann ich mehr als 2 Elemente mit der gleichen Größe in einer "Zeile" ausrichten, mache ich dynamisch Zeilen mit dem "+" und die anderen Zeilen sind in Ordnung, wenn ich "Anzeige: inline-flex; width: 100% ", aber wenn die" erste Zeile "bei inline-flex ist, wird es kaputt gehen, und wenn ich nach weiteren Zeilen klicke, geht es nicht nach unten, sondern in derselben Zeile :

1. Zeile

nachdem ich generieren einige Zeilen dynamisch

   <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

Verwenden Sie ein 12 Spalten div und teilen Sie es auf mehrere divs:

<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

Verwenden Sie diese HTML-Struktur

<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>