Twitter Bootstrap：将按钮定位在块级输入框的右侧？

Question

我有一个输入框和一个如此定义的按钮：

    <form class="form-inline">
        <input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
        <button type="submit" class="btn btn-primary">Filter by Languages</button>
    </form>

但按钮显示在第二行。是否可以将按钮定位在输入框的右侧？

Answer 1

我认为你可能误解了input-block-level课程的使用。当此类应用于输入字段时，输入字段将采用所有可用宽度。

因此，您放置在其旁边的任何元素都将翻转到下一行。

如果您需要并排元素，请移除input-block-level并替换为更合适的类（input-mini，input-small，input-medium，{{1} }，input-large，input-xlarge或input-xxlarge类。）

Answer 2

  

我正在使用input-xxlarge，但它还不够大。我如何能   定制吗？我尝试过像.input-xxlarge {width：   1500px; ！重要;身高：30px！重要; }，但事实并非如此   覆盖它。 - Parseltongue 13分钟前

使用开发人员工具（例如Chrome，Safari等）检查元素，看看其他宽度/高度是否覆盖了显式声明。我尝试在我的结尾更改它，并且在我更改bootstrap.css中的实际类时成功了。

Answer 3

设置每个元素所需的宽度并浮动它们：

form{overflow: hidden}
form input{
    display: block;
    width: 70%;
    float: left;
}
form button{
    display: block;
    width: 30%;
    float: left;
}