jquery - 动态表单元素 Bootstrap

Question

我无法使此表单按预期工作。我尝试使用代码 from this page 构建一个包含动态字段的表单，但每当我按下表单上的“添加”按钮时，它都会在添加新行之前显示一个缩进。为了了解我的问题，您可以查看此链接:http://158.69.227.133/test/ .如您所见，页面加载后“标题”字段与“页面”字段对齐，但是当您单击“添加”按钮时，整个设计变得糟糕。

你可以看看我的代码:

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.voca:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.btn-add:not(:last)')
      .removeClass('btn-default').addClass('btn-danger')
      .removeClass('btn-add').addClass('btn-remove')
      .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove   ');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.voca:first').remove();

    e.preventDefault();
    return false;
  });
});

.entry:not(:first-of-type) {
  margin-top: 10px;
}
.glyphicon {
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="control-group" id="fields">
    <div class="controls">
      <form role="form" autocomplete="off" method="post">
        <div class="row">
          <div class="col-md-6">
            <input class="form-control" placeholder="Page" name="page" type="text">
          </div>
          <div class="col-md-3">&nbsp;</div>
          <div class="col-md-3">
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </div>
        </br>
        </br>
        <div class="row">
          <div class="voca">
            <div class="col-md-4">
              <input class="form-control" placeholder="Title" name="title[]" type="text">
            </div>
            <div class="col-md-4">
              <input class="form-control" placeholder="Name" name="field[]" type="text">
            </div>
            <div class="col-md-2">
              <select class="form-control" name="choice[]">
                <option>Select</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="col-md-2">
              <button type="button" class="btn btn-success btn-add">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add
              </button>
              </br>
            </div>
          </div>
        </div>

      </form>
      <br>
    </div>
  </div>
</div>

我怎样才能摆脱第二行的额外缩进？

Answer 1

您的行中缺少 行 类。 row 类对于 bootsrap grid layout 是必需的.像第一个一样用 .row div 包裹你的后续 .voca div，它们会很好地对齐。

将 currentEntry = $(this).parents('.voca:first') 更改为 currentEntry = $(this).parents('.row:first') 将确保您复制行元素，从而解决您的问题。