動的フォーム要素ブートストラップ

Question

このフォームを期待どおりに動作させることはできません。私はコードfrom this pageを使って動的なフィールドを持つフォームを構築しようとしましたが、フォーム上の "Add"ボタンを押すたびに、新しい行を追加する前にインデントが表示されます。私の問題を理解するために、あなたはこのリンクを見てください：http://158.69.227.133/test/。ご覧のように、ページがロードされると、「タイトル」フィールドは「ページ」フィールドに揃えられますが、「追加」ボタンをクリックすると、デザイン全体が駄目になります。

あなたはちょうど私のコードを見てみることがあります。私は二行目からは、余分なインデントを取り除くことができますどのように

$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.voca:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.btn-add:not(:last)') 
 
     .removeClass('btn-default').addClass('btn-danger') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove '); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.voca:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});

.entry:not(:first-of-type) { 
 
    margin-top: 10px; 
 
} 
 
.glyphicon { 
 
    font-size: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <div class="control-group" id="fields"> 
 
    <div class="controls"> 
 
     <form role="form" autocomplete="off" method="post"> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      <input class="form-control" placeholder="Page" name="page" type="text"> 
 
      </div> 
 
      <div class="col-md-3">&nbsp;</div> 
 
      <div class="col-md-3"> 
 
      <button type="submit" class="btn btn-primary">Save</button> 
 
      </div> 
 
     </div> 
 
     </br> 
 
     </br> 
 
     <div class="row"> 
 
      <div class="voca"> 
 
      <div class="col-md-4"> 
 
       <input class="form-control" placeholder="Title" name="title[]" type="text"> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <input class="form-control" placeholder="Name" name="field[]" type="text"> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <select class="form-control" name="choice[]"> 
 
       <option>Select</option> 
 
       <option>1</option> 
 
       <option>2</option> 
 
       </select> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <button type="button" class="btn btn-success btn-add"> 
 
       <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add 
 
       </button> 
 
       </br> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     </form> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div>

を？

Answer 1

あなたの行のクラスがrowありません。 bootsrap grid layoutにはrowのクラスが必須です。その後の.voca個のdivを.row個のdivで囲みます。最初の1個と同じように整列されます。

currentEntry = $(this).parents('.voca:first')をcurrentEntry = $(this).parents('.row:first')に変更すると、行要素が重複して問題が解決されます。