1

我有一个输入框和一个按钮，定义如下：

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

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

4

3 回答 3

3

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

因此，您放置在它旁边的任何元素都将滚动到下一行。

如果您需要并排放置元素，请删除input-block-level并替换为更合适的类（input-mini、input-small、input-medium、input-large、input-xlarge或input-xxlarge类span）。

于 2013-07-18T17:30:17.147 回答
1

我正在使用 input-xxlarge，但它仍然不够大。我该如何定制它？我试过类似 .input-xxlarge { width: 1500px; ！重要的; 高度：30px！重要；} ，但它不会覆盖它。– 蛇佬腔 13 分钟前

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

于 2013-07-18T17:59:34.020 回答
0

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

form{overflow: hidden}
form input{
    display: block;
    width: 70%;
    float: left;
}
form button{
    display: block;
    width: 30%;
    float: left;
}
于 2013-07-18T17:25:03.900 回答