如何使用bootstrap 3为表单控件创建连接按钮？

Question

我正在尝试获取这些表单控件上的按钮:

Bootply示例

看起来像这个例子中的控件:

Bootsnipp示例

基本上我试图使用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>

UPDATE

请问使用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的答案,我没有尝试过,我发现大多数这些解决方案在尝试将列大小应用于父元素时都破了.

Answer 1

你需要在类中.input-group-btn包含按钮,如下所示:

<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn"><!-- DO THIS -->
  <button class="btn btn-success btn-add" type="button">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

演示:http://www.bootply.com/BNUUlFK5xX