gpt4 book ai didi

jquery - Bootstrap 中的表单字段对齐困难

转载 作者:太空宇宙 更新时间:2023-11-03 21:11:33 26 4
gpt4 key购买 nike

在我的表单中,我有一个 ' Add number ' 添加 text input 的按钮div 内的字段对于“电话”,使用 jquery .但是当我为输入添加新字段时,它与其他字段不一致。目前它有以下输出:

Current output is like this:

但我希望电话号码的输入字段更有条理。就像下图和Remove输入字段右侧的按钮。 That I need

我不确定如何使用 Bootstrap 执行此操作。这是一个示例 fiddle的代码。

$(document).ready(function() {
var wrapper = $(".input_fields_wrap");
var count = 0;

$('p#add_field').click(function(e) {
e.preventDefault();
count += 1;
$('#container').append(
'<div><input type="text" class="form-control" id="field_' + count + '" name="fields[]' + '"/><a href="#" class="remove_field">Remove</a></div>'
);
});

$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control input-md" type="text">
</div>
</div>
<div class="form-group">
<div id="container" class="input_fields_wrap">
<label class="col-sm-2 control-label" for="dose">Phone</label>
<div class="col-sm-10">
<p id="add_field"><button type="button" href="#" class="btn btn-info"><span>Add number</span></button></p>
</div>
</div>
</div>

</form>
</div>

最佳答案

您只需将添加的字段放在它们自己的 Bootstrap 列中,包括开头的空列。或者您可以只使用 col-sm-offet-2 类。

<div class="col-sm-2"></div>
<div class="col-sm-9"><input type="text" class="form-control" id="field_' + count + '" name="fields[]' + '"/></div>
<div class="col-sm-1"><a href="#" class="remove_field">Remove</a></div>

Fiddle

关于jquery - Bootstrap 中的表单字段对齐困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46350287/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com