內聯表單引導中的元素之間沒有空格（動態表單）

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元素是display: inline-block這意味着任何在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; 
} 

還要注意：的動態建立HTML是無效becuse有multple元件具有相同的ID屬性。