dynamische Bootstrap Formularausrichtung

Question

Ich habe eine dynamische Form, die ich so ausrichten möchte.

habe ich versucht, Bootstrap-Grid-System, aber im mit noch immer nicht.

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

Ich habe eine Geige für Ihre Anforderungen erstellt. Sie haben nicht wirklich col-md-12 Grid abgeschlossen, wie Sie gesagt haben. Ich habe die gleiche Benutzeroberfläche mit col-xs-12 Grid erstellt. Wenn Sie auf Delete entry geklickt haben, haben Sie tatsächlich die div Schaltfläche selbst entfernt. Hier ist die Arbeitsgeige: Jsfiddle

Answer 2

i löste es bereits, fügte ich

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

unter dem letzten Eingabefeld in der h Tml-Datei, um das "Col-MD-12" -Graster zu vervollständigen, habe ich die Javascript-Col-Md angepasst, um mit denen in der HTML zu entsprechen.

aber ich ein anderes Problem haben, so scheint es, dass meine Schaltfläche Löschen nicht mehr funktioniert