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

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

要与本例中的控件相似，请执行以下操作：

基本上，我正在尝试使用Bootstrap3[Bootstrap3.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>

更新

将使用一个引导式表单生成器生成以下内容：

<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的答案类似，我没有尝试过，我发现在尝试将列大小调整应用于父元素时，大多数解决方案都失败了。

您要查找的是按钮组：

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

左边
中间的
赖特

您缺少类和包装，还有其他我不熟悉的3.x

<div class="container">

      <div class="row">


            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>

            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>

            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>


      </div>

    </div>

对于折叠时的垂直间距，您需要在“form group”列中再添加一个包装器（引导表单的包装器很重）：

---

您需要用class

将按钮包装在span中。输入组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>

---

演示：

按钮组不起作用，我用了几次不同的尝试更新了bootply，但它们似乎与输入不起作用。啊，我误解了您试图实现的目标（我正在查看bootsnip控件）请参阅我的新答案。在第一个谷歌搜索结果的第一页上找到这样一个措词古怪的问题的答案真是太好了。

<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>