Bootstrap - Input-group-btn不会剪切到输入组

Question

我是bootstrap的新手，我正在尝试在我的网络应用中实现它。 我想将三个不同的部分分组，以使其看起来不错，但下面的代码结果使<button>浮动到浏览器的右侧。

我认为这意味着分组工作，因为它在同一行。但不知怎的，<button>仍然没有剪切到<input/>。我已经使用This bootstrap components页面作为参考/示例来生成我的代码。

我的问题：如何将<button>“剪辑/捕捉”放到<input/>上？

<div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn">
    <button type="button" class="btn btn-default ">Add</button>
</div>

这就是我的结果（注意：包含不同的文字，但代码是相同的）：

Answer 1

使用课程pull-left，这会将其剪辑为<input/>。 请参阅以下更新代码：

<div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn pull-left"> <!-- add pull-left here -->
    <button type="button" class="btn btn-default ">Add</button>
</div>