创建文本并选择输入类型为相同高度

Question

如何在BS3中将输入元素的高度设置为相同的大小

HTML：

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

根据documentation，我应该走上正轨，但text元素小于select元素

UPDATE1：

Answer 1

我不建议操纵高度。让他们成长为他们需要的尺寸。但是1解决方案是使用css height或max-height属性，如

{{1}}

Answer 2

请注意， .css之后包含的所有后续bootstrap.css文件可能会覆盖某些核心方面的功能。例如：

.form-control{ 
    height: 20px;
}

包含类似的内容将覆盖从Bootstrap应用的匹配css。如果您遇到问题，请始终验证问题是否可以在标准化的沙盒环境中重现，例如Bootply或JSFiddle。

Answer 3

此问题仅适用于Chrome和IE。 Firefox按预期显示选择和输入元素。

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

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

这将导致所有三个浏览器显示这些元素，就好像它们位于相同的“引导行/列”上，尽管输入和选择元素仍然是不同的高度。

---

或者您可以按照蒂姆·路易斯的说明关注Bootstrap recommendations并添加：

class:"form-group" 

到col- *或包含元素
和：

class:"form-control" 

输入/选择元素。

（虽然类：“form-control”是确保元素高度一致所需的全部）

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.

---

就我个人而言，我认为默认的表单控件类太大了，甚至添加了表单控件和输入sm，正如评论中提到的那样，对于我的口味来说太大了。我的建议是添加表单控件类并添加/定义一个input-xs类，如下所示：

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

---

上述差异很可能是由于不同浏览器呈现选择元素的下拉箭头的方式。
Chrome：

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

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转为23px。

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

computed:
input: 22.5667px
select: 23px