Bootstrap 内联表单在不同的行上有按钮

Question

我直接从bootstrap's documentation复制了这段代码：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

我添加了width:50% 以防止输入占用100% 的宽度，删除了最后一个input-group，并且我尝试用form-group 包裹按钮，但这并不能解决任何问题。输入和按钮仍然在不同的行上。我希望它们像 bootstrap 的文档中一样，它们都在一行中。

查看萤火虫，我找不到引导文档如何限制宽度。他们的.bs-example 类没有产生任何结果：

margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;

position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}

但不知何故，他们的文档显示内联表单位于一行中。

jsfiddle

Answer 1

将您的按钮移动到输入组 http://jsfiddle.net/5zr4j4mv/2/

    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        <button type="submit" class="btn btn-primary">Transfer cash</button>
    </div>
  </div>