如何在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>

更新

最终我使用了一个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的答案类似，我没有尝试过。我发现大部分这些解决方案在尝试将列大小应用于父元素时都会出现问题。

- Sean Kimball

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

- Shawn Taylor

---

太好了。在第一个谷歌搜索结果的第一页找到这样一个奇怪措辞问题的答案真是太棒了。 - felwithe

Answer 2

你缺少了3.x中的一些类和包装器，还有其他我不熟悉的东西。

http://www.bootply.com/V5fU59ukqE

<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”内再添加一个包装器（Bootstrap表单包装器很多）：

<div class="col-sm-4">
              <div class="form-group">
              <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>

- Christina

Answer 3

搜索引擎将我带到了这个页面，但不幸的是它没有提供解决我的问题的方法。因此，我在这里发布一个更新的答案，为像我这样没有解决问题的未来读者提供帮助。

Bootstrap 4 更新

尽管接受的答案适用于 Bootstrap 3，但对于从版本 4 开始的新版本，情况并非如此。

这个版本的解决方案是

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

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

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

如果您希望将按钮放在输入文本前面，您需要使用class="input-group-prepend"而不是class="input-group-append"。

- Panagiotis Bougioukos

Answer 4

你需要寻找的是按钮组：

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

- Shawn Taylor

---

按钮组不起作用，我在Bootply上更新了几个不同的尝试，但它们似乎不能与输入一起使用。 - Sean Kimball

啊，我误解了你想要实现的目标（我一直在看 bootsnip 控件）。请查看我的新回答。 - Shawn Taylor