输入文本+选择+ Bootstrap + form-inline：水平对齐标签

Question

这是Stack Overflow中的第一个问题！

所以，我试图对齐（水平）我的表单的所有标签，但是没有成功。我的HTML是：

<form class="form-inline" id="form-filtro" role="form">
    <div class="form-group">
        <label class="control-label" for="filtrar-por">Filtrar por</label>
        <select class="form-control" id="filtrar-por">
            <option value="id">ID</option>
            <option value="id">Nome</option>
            <option value="id">Nome comercial</option>
            <option value="id">CPF/CNPJ</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label" for="filtro">Filtro</label>
        <input type="text" class="form-control" id="filtro">
    </div>
</form>

但结果是：

我做错了什么？

Answer 1

我去了bootstrap网站并将表单代码直接粘贴到示例表单内联演示的顶部，并且工作正常。

但是如果我手动设置表单样式以限制它的最大宽度，我确实遇到了问题。看起来您的表单可能没有足够的空间来显示，因此标签正在包装。

检查样式表中表单上的样式，或者检查包含元素上的样式，看是否存在限制大小的内容。

如果您发布了极简主义复制品，也会有所帮助。 ; - ）