Question

我正在尝试为表单创建一个简单的标签和选择框。

我想要这个：[LABEL] [SELECT BOX]。排队。一切都在同一条线上。简单，嗯？

然而，当我使用bootstrap中的内联表单元素时，它会包装盒子：

<form class="form-inline" role="form">
    <label for="sort-values">Sort:
        <select id="sort-values" class="form-control">
            <option value="2">Distance</option>
            <option value="3">Rating</option>
            <option value="4">Price</option>
        </select>
    </label>
</form>

我错过了什么？示例：http://bootply.com/79458

Answer 1

元素.form-control的宽度是问题..

.form-control {
    width: 100%;
}

目前它是100％..如果你想要它工作，你可以完全删除宽度..或只是指定一个较小的宽度，如200px;

Forked example here

Answer 2

您可以使用两种方法关联label和select。第一种方法：id为select，属性for为标签。第二：在select内加label。没必要同时使用它们。

代码：

<form class="form-inline" role="form">
    <label class="control-label" for="sort-values">Sort:</label>
    <select id="sort-values" class="form-control">
        <option value="2">Distance</option>
        <option value="3">Rating</option>
        <option value="4">Price</option>
    </select>
</form>

示例：http://bootply.com/79462

如何设置内联表单的样式

2 个答案: