Twitter Bootstrap中选择框的大小

Question

我正在使用Twitter Bootstrap。选择框总是比输入框窄。

如何使它们具有相同的宽度？添加填充有帮助，但看起来很难看。

修改

这是一个小例子 - http://jsfiddle.net/DfY8z/2/
应用自定义类的相同示例 - http://jsfiddle.net/DfY8z/3/

我可以使用span3，span4等类。但我希望我的输入填充所有可用空间（并且大小相同），所以我使用自定义类。

Answer 1

只需在我form-control旁边添加<select class="form-control input-sm" id="xxx" ... > 课程。

MVVM

Answer 2

<input type="text" value="" name=""><br>
<select>
 <option>Some options which is very very long... </option>
</select>

结果是方框的确切大小。

Answer 3

您似乎使用旧版本的bootstrap（当前版本为2.2.1）。当没有应用类时以及使用span *方法调整大小时，较新版本中的选择框和输入框的大小相同

如果您需要设置自定义尺寸，则必须单独使用2个不同的自定义类或目标选择框和输入框。输入框需要比选择框小14px（文本区域也是如此）。

请参阅updated example

// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />

<br />
<br />

<select class="myClass">
    <option> ABC </option>
    <option> XYZ </option>
</select>

Answer 4

放置控件

在div中并在div上应用class =“col-sm-2”。

<div class="col-sm-2"> <select></select>

您可以根据您的要求更改col-sm-2 col-sm-3

答案 4 :(得分：0)

这对我有用 - 转到bootstrap.css文件并注释掉以下内容 -

select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }

答案 5 :(得分：-2)

这有效：

<select style="width: 200px">...</select>

Answer 5

这对我有用 - 转到bootstrap.css文件并注释掉以下内容 -

select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }

Answer 6

这有效：

<select style="width: 200px">...</select>