我有一个动态表单,在bootstrap中有多个字段,当我添加一个新表单时,它与第一个表单不对齐。如果您能告诉我如何在内联元素之间建立空间,我感谢您。
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--;
})
});
答案 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属性。