RosS RosS - 1 year ago 177
CSS Question

Align many divs with same size with bootstrap yii2

How I can Align more than 2 elements with same size in a "row" , I make dynamically rows with that "+" and the others rows are okay when I put "display: inline-flex; width: 100%" , but if the "first row" is with inline-flex its going broken , and when I clicked for more rows , it dont go down , it make them on the same row

1st line
at the moment

after I generate some rows dynamically
after I generate dynamically rows

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

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


$(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); (e) { //on add input button click
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>\
<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>\
wrapper.on("click", ".remove_field", function (e) { //user click on remove glyphicon

Answer Source

Use a 12 columns div and split it on several divs:

<script src=""></script>
<script src=""></script>
<link href="" 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>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <input type="text" name="" class="form-control">
    <div class="col-md-4 col-sm-4 col-xs-4">
        <button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download