在Bootstrap中如何使输入框和按钮对齐？

Question

使用 Twitter Bootstrap 2.1.0 时，如果使用以下 HTML：

When using Twitter Bootstrap 2.1.0, and using HTML like this:

<div class="row">
    <div class="span10">
        <form data-bind="submit: AddDepartment">
            <input type="text" class="input-large" placeholder="Department Name" />
            <button type="submit" class="btn">Add</button>
        </form>
    </div>
</div>

按钮与文本框不对齐。您可以在此处查看jsFiddle。

使用Bootstrap的正确方法是什么，以使它们对齐？

- Brian McCord

Answer 1

您需要在表单元素中添加 form-inline 类，如下所示：

<form data-bind="submit: AddDepartment" class="form-inline">

这是一个例子：http://jsfiddle.net/SufMb/

- Phil

---

作为后续，如果出现非表单情况该怎么办？例如我也在使用 Knockout，代码如下：<div class="row" data-bind="foreach: Departments, visible: Departments().length > 0"> <div class="span5"> <input type="text" class="input-large" data-bind="value: DepartmentName" /> <a href="" class="btn btn-small" data-bind="click: $parent.RemoveDepartment"><i class="icon-remove"> </i></a> </div> </div> 我该如何将它们排成一行，并仍然保持行之间的间距？ - Brian McCord

什么时候/为什么会在表单之外使用表单元素？无论如何，您只需在包装div <div class="row form-inline"> 上放置 form-inline。 - Phil

如果我这样做，行之间的间距就消失了。这里有另一个 fiddle，模拟 knockout 创建行时的情况：http://jsfiddle.net/bmccord/w7pEM/ - Brian McCord

任何包装 div 都应该有 form-inline，试一下吧，伙计，到处都加上 form-inline。http://jsfiddle.net/fvzWK/ - Phil

是的，但这会再次移除行之间的间距。例如，如果您根本没有小按钮，则文本框之间有一个间隔，在添加form-inline后消失，因为它将所有文本框都放在一起。有没有办法保留间距？ - Brian McCord

完美！你赢了这个问题。 - Brian McCord

Answer 2

尝试这段代码

<div class="row">
    <div class="span10">
        <form data-bind="submit: AddDepartment">
            <div class="input-append">
                <input type="text" class="input-large" placeholder="Department Name" />
                <button type="submit" class="btn">Add</button>
            </div>
        </form>
    </div>
</div>

- Nick Kugaevsky

---

虽然那非常接近，但我更愿意将按钮分开。小按钮也不好看。请查看Phil答案下的评论以了解更多细节，其中还包含另一个示例展示了我想要做的完整效果。 - Brian McCord