将许多具有相同大小的 div 与 bootstrap yii2 对齐答案

【问题标题】：Align many divs with same size with bootstrap yii2将许多具有相同大小的 div 与 bootstrap yii2 对齐
【发布时间】：2016-12-10 17:04:09
【问题描述】：

如何在 "row" 中对齐超过 2 个相同大小的元素，我使用 "+" 动态创建行，当我输入 "display: inline-flex; width: 100%" 时其他行都可以，但是如果“第一行”是 inline-flex 它会坏掉，当我点击更多行时，它不会下降，它会使它们在同一行：

第一行

在我动态生成一些行之后

                <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--;
    });
});

【问题讨论】：

标签： html css twitter-bootstrap yii2 alignment

【解决方案1】：

使用 12 列 div 并将其拆分为 几个 div：

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

【讨论】：

【解决方案2】：

使用这个 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="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>

【讨论】：

出了什么问题？
请分享您的代码，似乎父 div 的空间较小。