内联表单引导中的元素之间没有空格（动态表单）

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属性。