我无法使此表单按预期工作。我尝试使用代码 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"> </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>
我怎样才能摆脱第二行的额外缩进?
最佳答案
您的行中缺少 行
类。 row
类对于 bootsrap grid layout 是必需的.像第一个一样用 .row
div 包裹你的后续 .voca
div,它们会很好地对齐。
将 currentEntry = $(this).parents('.voca:first')
更改为 currentEntry = $(this).parents('.row:first')
将确保您复制行元素,从而解决您的问题。
关于jquery - 动态表单元素 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38820648/