css - 如何在引导程序中使输入框和按钮对齐？

Question

使用 Twitter Bootstrap 2.1.0 并使用如下 HTML 时：

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

让他们排队的正确引导方式是什么？

Answer 1

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

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

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

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>