css - 如何设置内联表单的样式

Question

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

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

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

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

分叉的例子在这里

Answer 2

您可以使用两种方法进行链接label和select. 第一种方法：标签id的forselect和属性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