Question

我的代码工作正常，但标签位置不正确。点击第一个标签不在正确的位置，但其他标签位于正确的位置。

我在哪里做错了？

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<form>
    <div class="form-group">
        <label class="col-lg-3 control-label">Field:1</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="field1" />
        </div>
    </div>
    <script type="text/javascript">
    var info = 1;
    function add_fields() {
        info++;
        var objTo = document.getElementsByClassName('form-group')[0]
        var divtest = document.createElement("div");
        divtest.innerHTML = '<div class="form-group"><label class="col-lg-3     
        control-label">Field'+info+'</label><div class="col-lg-5"> <input   
        type="text" class="form-control" name="field1" /></div></div>';
        objTo.appendChild(divtest)
    }
    </script>
    <div class="form-group">
        <div class="col-lg-9 col-lg-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Answer 1

该行被附加到错误的位置。尝试：

<div id="additionalFields"></div>

您希望新字段在哪里，然后更改

var objTo = document.getElementsByClassName('form-group')[0]

到

var objTo = document.getElementById('additionalFields');

这应该纠正对齐。

Answer 2

问题在于你的bootsrap列。

<form>

  <div class="form-group ">
   <label class="col-lg-3 control-label">Field:1</label>
    <div class="col-lg-9">
     <input type="text" class="form-control" name="field1" />
   </div>
  </div>
 <div class="form-group">
   <div class="col-lg-9 col-lg-offset-3">
   <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>

    <script type="text/javascript">
         var info = 1;
    function add_fields() {
    info++;
    var objTo = document.getElementsByClassName('form-group')[0]
    console.log(objTo);

       var divtest = document.createElement("div");
     divtest.innerHTML = '<div class="form-group"><label class="col-lg-3 control-label">Field'+info+'</label><div class="col-lg-9"> <input type="text"         class="form-control" name="field1" /></div></div>';

     objTo.appendChild(divtest)
     }

您可以将其作为参考。希望它有所帮助。

在bootstrap表单中单击添加行

2 个答案: