内联表单引导程序中的元素之间没有空格(动态表单)

时间:2017-04-10 17:57:23

标签: forms twitter-bootstrap

我有一个动态表单,在bootstrap中有多个字段,当我添加一个新表单时,它与第一个表单不对齐。如果您能告诉我如何在内联元素之间建立空间,我感谢您。

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--;

    })
});

1 个答案:

答案 0 :(得分: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无效,因为有多个元素具有相同的ID属性。