Twitter bootstrap 3 制作文本并选择输入类型，使其具有相同的高度

如何使输入元素的高度在BS3中具有相同的大小

HTML:

根据，我应该在正确的轨道上，但是文本元素比select元素小

更新1：

---

我不建议操纵高度。让它们长到需要的大小。但有一种解决方案是使用css height或max height属性，如

<div class="row">
        <div class="form-group col-xs-4 pull-left">
            <input type="text" class="form-control" placeholder="User" style="height:50px" />
        </div>
        <div class="form-group col-xs-4  pull-right">
            <select  class="form-control" placeholder="Role"  style="height:50px" />
        </div>
</div>  

---

请记住，bootstrap.css之后包含的任何后续.css文件可能会覆盖某些核心方面的功能。例如：

.form-control{ 
    height: 20px;
}

---

包含这样的内容将覆盖从引导应用的匹配css。如果您遇到问题，请始终验证该问题是否可以在标准的沙盒环境中重现，如Bootply或JSFIDLE。

该问题特定于Chrome和IE。Firefox按预期显示选择和输入元素

解决相邻未对齐col-*的一个解决方案是：

<style>
input{
    padding: 0px 0px;
}
select{
    padding: 1px 0px;
}
</style>

到列-*或包含元素，以及：

到输入/选择元素

尽管class:form控件是确保元素高度一致所需的全部

Basic example
Individual form controls automatically receive some global styling. 
All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. 
Wrap labels and controls in .form-group for optimum spacing.

IE对于使用哪些属性来计算最终大小更不透明，它不会像Chrome那样显示用户样式表样式：

In IE the internal Line-Heights of each element are the same:
internal line-height for both elements: 18.57px;

but if you look at the computed Layout it shows
input: 22.57px
select: 21.29px

不过Firefox正确显示了元素。我猜是因为它把22.5667px四舍五入到23 px

Firefox:
internal line-height:
input: 18.5667px
select: 21px

computed:
input: 22.5667px
select: 23px

---

我不明白你的问题。和元素都使用相同的类表单控件，这使它们适应其父元素的宽度，在本例中为col-xs-4。如果查看此示例，可以看到它们的宽度完全相同，因为它们的父元素具有相同的宽度。尽量更好地解释你所面临的问题。@TimLewis:更新了我的问题-我如何使它们具有相同的高度好的，但它们目前具有相同的高度。。。你可以通过添加表单控制输入来调整-*，其中*可以是sm或lg，但我真的不知道你在问什么…@Timleis:我运行了你的bootply，它们的维度相同。当我在示例html页面上运行它时，text元素的高度比select元素短，那么页面上可能有一些CSS覆盖了这些元素的高度。您能在Bootply或JSFIDLE中创建示例html页面的精确副本吗？这样，我们就可以看到确切的问题是什么。

Basic example
Individual form controls automatically receive some global styling. 
All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. 
Wrap labels and controls in .form-group for optimum spacing.

<style>
.input-xs {
    height: 23px;   
    padding: 2px 4px;  
    line-height: 19px;
    font-size: 12px;
}
</style>

internal line-height:
input: 18px
select: 19px

computed:
input: 22px
select: 21px

due to:
user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}

In IE the internal Line-Heights of each element are the same:
internal line-height for both elements: 18.57px;

but if you look at the computed Layout it shows
input: 22.57px
select: 21.29px

Firefox:
internal line-height:
input: 18.5667px
select: 21px

computed:
input: 22.5667px
select: 23px