8

我正在使用 Twitter 引导程序。选择框总是比输入框窄。

在此处输入图像描述

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

编辑

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

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

4

6 回答 6

10

只是在为我工作的input-sm旁边添加课程。form-control

<select class="form-control input-sm" id="xxx" ... >
于 2016-02-11T00:12:57.113 回答
3 
<input type="text" value="" name=""><br>
<select>
 <option>Some options which is very very long... </option>
</select>

结果是盒子的确切大小。在此处输入图像描述

于 2012-11-26T09:20:11.630 回答
0

您似乎正在使用旧版本的引导程序（当前版本是 2.2.1）。较新版本中的选择框和输入框在未应用类和使用 span* 方法调整大小时大小相同

如果您需要设置自定义大小，则必须使用 2 个不同的自定义类或分别定位选择框和输入框。输入框需要比选择框小 14 像素（文本区域也是如此）。

查看更新的示例

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

<br />
<br />

<select class="myClass">
    <option> ABC </option>
    <option> XYZ </option>
</select>
于 2012-11-26T23:26:30.973 回答
0

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

select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
于 2018-03-10T09:00:30.593 回答
0

放置控件

在 div 内并在 div 上应用 class="col-sm-2" 。

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

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

于 2015-11-04T08:12:24.207 回答
-2

这有效：

<select style="width: 200px">...</select>
于 2014-05-13T14:32:42.650 回答