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个类。将您的后续.voca div与.row div一起包装，就像第一个一样，它们将很好地对齐。

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

动态表单元素Bootstrap

1 个答案: