如何使用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>

更新

使用引导程序生成器给我这个：

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

DEMO：http://www.bootply.com/BNUUlFK5xX

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>

对于垂直间距，当它崩溃时，你需要另一个包装器（Bootstrap表单是包装器重），就在“form-group”列中：

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

Answer 3

您正在寻找的是按钮组：

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