インラインフォームのブートストラップ（動的フォーム）の要素間にスペースがありません

Question

ブートストラップに複数のフィールドを持つ動的フォームがあり、新しいフォームを追加すると最初のフォームと揃えられません。インライン要素の間にどのようにスペースを作ることができるか教えていただければ幸いです。

image of the form

HTML：

<div class="row" id="dynamic_form"> 
    <div class="form-group form-horizontal"> 
    <label class="control-label">Primitives</label> 
     <div class="form-inline"> 
     <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]"> 
      <option value=" " disabled selected>primitive</option> 
      <option value="sphere">sphere</option> 
      <option value="triangle">triangle</option> 
     </select> 
     <input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)"> 

     <input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)"> 

     <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" > 
      <option value=" " disabled selected>color</option> 
      <option value="red">red</option> 
      <option value="blue">blue</option> 
      <option value="green">green</option> 
      <option value="yellow">yellow</option>  
     </select> 
     <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
     </button> 
     </div> 
    </div> 
    </div> 

CSS：

.form-inline .form-group { 
    margin: 2px 2px; 
} 

JavaScriptを：私はいくつかの問題があると思い

function getHTMLString() { 
    var complex_html = [ 
     '<div class="container">', 
     '<div class="row" id="dynamic_form">', 
      '<div class="form-group" >', 
       '<div class="form-inline">', 
       '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">', 
        '<option value=" " disabled selected>primitive</option>', 
        '<option value="sphere">sphere</option>', 
        '<option value="triangle">triangle</option>', 
       '</select>', 
       '<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">', 

       '<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">', 

       '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">', 
        '<option value=" " disabled selected>color</option>', 
        '<option value="red">red</option>', 
        '<option value="blue">blue</option>', 
        '<option value="green">green</option>', 
        '<option value="yellow">yellow</option>',  
       '</select>', 
       '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>', 
       '</button>', 
       '</div>', 
      '</div>', 
      '</div>', 
      '</div>', 
    ].join(''); 
    return complex_html; 
} 

$(document).ready(function() { 
    var formCount = 0; 
    $('#add_more').on('click', function(e) { 
     console.log("here") 
     if (formCount < 4) { 
      var html = getHTMLString(); 
      var element = $(html); 

      $('#dynamic_form').append(html); 
      formCount++; 
     } else { 
      return; 
     } 
    }); 


    $('#dynamic_form').on("click","#remove_more", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').parent('div').parent('div').remove(); formCount--; 

    }) 
}); 

Answer 1

..

1）コンテナとグループではなく、フォームをインラインで追加するだけです。

2）form-inline要素は、を意味します。 HTMLマークアップ内の空白は、要素間にスペースを作成します。したがって、元の静的フォームはスペースで正しく表示されます。しかし、動的に追加されたフォームは、連結された文字列配列から生成されるため、要素間にHTML空白がありません。 複雑な文字列を、各フォーム入力後にスペースで更新します。。

http://www.codeply.com/go/kVWFHnAjiG

function getHTMLString() { 
    var complex_html = [ 
       '<div class="form-inline">', 
       '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">', 
        '<option value=" " disabled selected>primitive</option>', 
        '<option value="sphere">sphere</option>', 
        '<option value="triangle">triangle</option>', 
       '</select> ', 
       '<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)"> ', 

       '<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)"> ', 

       '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">', 
        '<option value=" " disabled selected>color</option>', 
        '<option value="red">red</option>', 
        '<option value="blue">blue</option>', 
        '<option value="green">green</option>', 
        '<option value="yellow">yellow</option>',  
       '</select> ', 
       '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>', 
       '</button>', 
      '</div>', 
    ].join(''); 
    return complex_html; 
} 

にも注意してください：同じID属性を持つmultple要素があるbecuse動的に構築されたHTMLが無効です。