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

Question

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

Bootply Example

看起来像本例中的控件:

Bootsnipp Example

基本上，我正在尝试使用 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 的回答，我没有尝试我发现大多数这些解决方案在尝试将列大小调整应用于父元素时都失败了。

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