javascript - 动态 Bootstrap 表单对齐

Question

我有一个动态表单，我想这样对齐。

我试过使用 bootstrap 网格系统，但我还是不明白。

HTML

<div class="form-group">
                <label>Time Schedule:</label>
                <div id="items">
                <div class="col-md-4">
                    <input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker>
                    </div> 
                    <div class="col-md-2"><h5>TO</h5></div>
                    <div class="col-md-4">
                    <input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker>
                    </div>
                 </div>
            </div>

Javascript

$(document).ready(function(){

    $("#add-entry").click(function(e){
        event.preventDefault();
        $("#items").append('<div class="col-sm-3">'
            +'<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker></div>'
            +'<div class="col-sm-2"><h5>TO</h5></div><div class="col-sm-3">'
            +'<input type="text" class="form-control" name="name" placeholder="12:00" data-timepicker></div>'
            +'<div class="col-sm-4"><input type="button" value="delete-entry" class="delete-entry"></div>');
    });

    $('body').on('click','.delete-entry',function(e){

        $(this).parent('div').remove();
    });


});

Answer 1

我已经根据您的要求创建了一个 fiddle 。正如您所说，您实际上并没有完成 col-md-12 网格。我使用 col-xs-12 网格创建了相同的 UI。此外，当您单击 Delete entry 时，您实际上是在删除按钮本身的 div。 这是工作 fiddle :Jsfiddle