为什么在使用引导程序时，动态生成的表单字段没有边距？

Question

I am trying to create a simple form that permits the user to add an unlimited amount of additional rows. 我正在尝试创建一个简单的窗体，该窗体允许用户添加无限数量的其他行。 The form is styled with bootstrap. 该表单的样式为bootstrap。 Why, when the fields are generated dynamically, are there no margins? 为什么在动态生成字段时没有边距？

表单域的图片

HTML: 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: 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);
    });
});

Answer 1

Bootstrap makes any .form-group class display inline-block. Bootstrap使任何.form-group类显示内联块。 The browser inserts a space after any inline-block element with trailing white-space or carriage returns. 浏览器在任何带有尾随空格或回车符的内联块元素之后插入一个空格。 For the elements constructed with javascript, the returns aren't present, and, thus, the trailing space is not inserted. 对于使用javascript构造的元素，不存在返回值，因此不会插入尾随空格。

This leaves three options: 剩下三个选项：

Add the spaces to the new elements created with javascript 将空格添加到使用javascript创建的新元素中
Remove the spaces from the original html and adjust the margins 从原始html删除空格并调整边距
Use a template 使用模板

Chris Coyier eloquently describes the options for space removal in this article . 克里斯·科耶尔（Chris Coyier）在本文中雄辩地描述了空间删除的选项。

Adding the spaces to the javascript is as simple as throwing them into the jquery append method found in the click event: 将空格添加到javascript就像将它们扔到click事件中的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);
});

And the append method where we append the form group's child elements: 还有append方法，用于追加表单组的子元素：

var group = document.createElement("div");
    $group = $(group);
    $group.addClass("form-group")
        .append(label, " ", input," ", validation);

Template options: you can use a client side templating engine like underscore's, handlebars, etc., or a server side template that is retrieved via an ajax request. 模板选项：您可以使用客户端模板引擎（例如下划线，车把等），也可以使用通过ajax请求检索的服务器端模板。

为什么在使用引导程序时，动态生成的表单字段没有边距？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-06-09 19:14:10

为什么在使用引导程序时，动态生成的表单字段没有边距？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-06-09 19:14:10

解决方案1
0 已采纳 2015-06-09 19:14:10