我正在尝试创建一个简单的表单，允许用户添加无限量的额外行。表单采用 Bootstrap 样式。为什么动态生成字段时没有边距？
HTML:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet"></link>
</head>
<body>
<div id="form">
<div class="form-inline">
<div class="form-group">
<label for='originalInput'>Original Input</label>
<input class='form-control' type='text' value='' name='originalInput'></input>
</div>
<div class="form-group">
<label for='originalInput'>Original Input</label>
<input class='form-control' type='text' value='' name='originalInput'></input>
</div>
<div class="form-group">
<label for='originalInput'>Original Input</label>
<input class='form-control' type='text' value='' name='originalInput'></input>
</div>
</div>
</div>
<button id="button">Add New Group</button>
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script>
</body>
JavaScript:
$(function () {
function createGroup(name) {
var label = document.createElement("label");
$label = $(label);
$label.attr("for", name)
.text(name);
var input = document.createElement("input");
$input = $(input);
$input.addClass("form-control")
.attr("type", "text")
.attr("name", name);
var validation = document.createElement("span");
$validation = $(validation);
$validation.addClass("field-validation-valid")
.attr("data-valmsg-for", name)
.attr("data-valmsg-replace", "true");
var group = document.createElement("div");
$group = $(group);
$group.addClass("form-group")
.append(label, input, validation);
return group;
}
$("#button").click(
function () {
var newFormInline = document.createElement("div");
$(newFormInline).append(createGroup("New Input"),
createGroup("New Input"),
createGroup("New Input"))
.addClass("form-inline");
$("#form").append(newFormInline);
});
});
最佳答案
Bootstrap 使任何 .form-group 类显示 inline-block。浏览器在任何带有尾随空格或回车符的行内 block 元素之后插入一个空格。对于使用 javascript 构造的元素，返回值不存在，因此不会插入尾随空格。
剩下三个选项:
- 将空格添加到使用 javascript 创建的新元素
- 去除原html中的空格并调整边距
- 使用模板
Chris Coyier 在 this article 中 Eloquent 地描述了空间删除的选项。 .
将空格添加到 javascript 就像将它们放入点击事件中的 jquery append 方法一样简单:
$("#button").click(
function () {
var newFormInline = document.createElement("div");
$(newFormInline).append(createGroup("New Input"), " ",
createGroup("New Input"), " ",
createGroup("New Input"))
.addClass("form-inline");
$("#form").append(newFormInline);
});
以及追加表单组子元素的追加方法:
var group = document.createElement("div");
$group = $(group);
$group.addClass("form-group")
.append(label, " ", input," ", validation);
模板选项:您可以使用客户端模板引擎，如下划线、 Handlebars 等，或使用通过 ajax 请求检索的服务器端模板。
关于javascript - 为什么在使用 bootstrap 时，动态生成的表单字段没有边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30716140/