Html Twitter Bootstrap 中选择框的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13560659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Size of select box in Twitter Bootstrap
提问by ChruS
I'm using Twitter Bootstrap. Select boxes are always narrower than input boxes.
我正在使用 Twitter Bootstrap。选择框总是比输入框窄。
How can I make them the same width? Adding padding helps, but it looks ugly.
我怎样才能使它们的宽度相同？添加填充有帮助，但它看起来很难看。
EDIT
编辑
Here is a little example - http://jsfiddle.net/DfY8z/2/
Same example with custom class applied - http://jsfiddle.net/DfY8z/3/
这是一个小例子 - http://jsfiddle.net/DfY8z/2/
应用自定义类的相同示例 - http://jsfiddle.net/DfY8z/3/
I can use classes like span3, span4etc. But I want my inputs to fill all available space (and to be the same size) so I'm using custom class.
我可以使用类span3，span4等等。但我希望我的输入填充所有可用空间（并且大小相同），所以我使用自定义类。
回答by Sudarshen
Just adding input-smclass just next to the form-controlworked for me.
只是在为我工作的input-sm旁边添加课程form-control。
<select class="form-control input-sm" id="xxx" ... >
回答by Nilam Doctor
<input type="text" value="" name=""><br>
<select>
<option>Some options which is very very long... </option>
</select>
The result is the exact size of the boxes.
结果是盒子的确切大小。
回答by tocallaghan
You appear to be using an older version of bootstrap (current version is 2.2.1). Select boxes and input boxes in newer versions are the same size when no class is applied and when resized using the span* method
您似乎在使用旧版本的引导程序（当前版本为 2.2.1）。较新版本中的选择框和输入框在未应用类和使用 span* 方法调整大小时大小相同
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas).
如果您需要设置自定义大小，则必须使用 2 个不同的自定义类或分别针对选择框和输入框。输入框需要比选择框小 14px（文本区域也是如此）。
See 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>
回答by saket pareek
This has worked for me - Go to bootstrap.css file and comment out the following --
这对我有用 - 转到 bootstrap.css 文件并注释掉以下内容 -
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
回答by Devendra Patel
place the control
放置控件
inside a div and apply class="col-sm-2" on the div.
在 div 内并在 div 上应用 class="col-sm-2" 。
<div class="col-sm-2">
<select></select>
<div class="col-sm-2">
<select></select>
you can change col-sm-2 col-sm-3 as per your requirement
您可以根据您的要求更改 col-sm-2 col-sm-3
回答by Vikash Madhow
This works:
这有效：
<select style="width: 200px">...</select>
