динамическое выравнивание формы бутстрапа

Question

У меня есть динамическая форма, которую я хочу выровнять так.

я попытался с помощью начальной загрузки системы сетки, но им до сих пор не получить его.

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

Я создал скрипку для ваших требований. Вы сказали, что на самом деле вы не заполнили сетку col-md-12. Я создал тот же пользовательский интерфейс, используя сетку col-xs-12. Кроме того, когда вы нажали на Delete entry, вы фактически удалили div самой кнопки. Вот рабочая скрипка: Jsfiddle

Answer 2

я решил уже, я добавил

<div class="col-md-2"></div> 

ниже последнего поля ввода в час tml, чтобы заполнить сетку «col-md-12», я скорректировал javascript col-md для соответствия тем, которые содержатся в html.

однако у меня есть еще одна проблема, мне кажется, что моя кнопка удаления не работает больше