使用HTML和Bootstrap的动态表单字段

Question

我正在尝试使用此网站的代码创建动态表单字段 http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

这是我修改后的一段代码

＆＃13;

＆＃13;

<div class="control-group" id="fields">
        <div class="controls"> 
        	<form role="form" autocomplete="off">
        		<div class="entry input-group col-xs-3">
        			<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
        			<span class="input-group-btn">
        				<button class="btn btn-success btn-add" type="button">
        					<span class="glyphicon glyphicon-plus"></span>
        				</button>
        			</span>
        		</div>
        		<!--Submit Button-->
        		<div class="form-group">
        			<button type="submit" class="btn btn-default" >Search</button>
        		</div>
        	</form>
        	<br>
        </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题是，每当我按下添加字段按钮时，新字段就会出现在搜索按钮下方。我想这是因为表格之前的div class="controls"。如何解决这个问题，以便仍然在搜索上方添加动态字段？

Answer 1

你有div的层次结构或其他东西。我要做的是评论你当前的代码。然后从bootsnip复制HTML，确保它有效，然后向后工作以获得之前的位置，即...自定义它。希望有所帮助，但是我的代码中没有足够的信息，并且从bootsnip页面可以正常工作。非常简单的代码，可能是一些愚蠢的东西被忽视了。当涉及到这些组件时，你的div层次结构就是一切。

你知道吗，只需将表格移到一切......？

也没有

<div class="control-group" id="fields"> 
</div>

在最高级别。