输入文本+选择+引导+内联：水平对齐标签 [英] Input text + Select + Bootstrap + form-inline: horizontal align label

问题描述

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

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

 < form class =form-inlineid =form-filtrorole =form > 
< div class =form-group> 
< label class =control-labelfor =filtrar-por> Filtrar por< / label> 
< select class =form-controlid =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-labelfor =filtro> Filtro< / label> 
< input type =textclass =form-controlid =filtro> 
< / div> 
< / form> 
  

但是，结果是：

我做错了什么？

解决方案

我去了bootstrap站点，并将表单代码直接粘贴到示例form-inline demo和top工作得很好。

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

检查样式表中或包含元素上的表单样式看看是否有什么限制尺寸。

如果您发布了一个简单的问题复制，它也会有所帮助。 ; - ）

This is my first question in Stack Overflow!

So, I'm trying to align (horizontal) all labels of my form, but, without success. My HTML is:

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

But, the result is:

What am I doing wrong?

解决方案

I went to the bootstrap site and pasted your form code directly over the top of the example form-inline demo and things worked fine.

I did however encounter an issue if I manually styled the form to restrict it's maximum width. It looks like your form may not have enough room to display and so the label is wrapping.

Check the styles on the form in your stylesheet, or on the containing element to see if something is restricting the size.

It would also help if you posted a minimalist reproduction of your issue. ;-)

这篇关于输入文本+选择+引导+内联：水平对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！