html - 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 的文档中一样，都在一行中。

查看 Firebug ，我找不到 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>