我正在努力使这些表单控件上的按钮:
看起来像这个示例中的控件:
基本上,我正在尝试使用Bootstrap3 [Bootstrap 3.1.1]表单控件重新创建Bootsnipp示例。
以下是HTML代码:
<div class="container">
<div class="row">
<div class="controls">
<div class="entry form-group col-sm-4">
<div class="input-group">
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
<div class="entry form-group col-sm-4">
<div class="input-group">
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
<div class="entry form-group col-sm-4">
<div class="input-group">
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
</div>
</div>
</div>
更新
最终我使用了一个Bootstrap表单生成器,生成了以下内容:
<div class="tag-controls">
<div class="entry col-sm-4 form-group ">
<div class="input-group">
<input class="form-control" name="tags[]" type="text" placeholder="Type something" />
<div class="input-group-btn">
<button class="btn btn-success btn-add" type="button" data-target="tag-controls"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
</div>
</div>
与Shawn的答案类似,我没有尝试过。我发现大部分这些解决方案在尝试将列大小应用于父元素时都会出现问题。