CSS 在 Twitter Bootstrap 中更改选择标签的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12066528/
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
Change width of select tag in Twitter Bootstrap
提问by grautur
How do I change the width of a select field, when using Twitter bootstrap? Adding input-xxlargeCSS classes doesn't seem to work (like it does on other form elements), so the elements in my drop down are currently cut off.
使用 Twitter 引导程序时，如何更改选择字段的宽度？添加input-xxlargeCSS 类似乎不起作用（就像它在其他表单元素上一样），因此我的下拉列表中的元素当前被切断。
回答by Shakeeb Ahmad
This works for me to reduce select tag's width;
这对我来说可以减少选择标签的宽度；
<select id ="Select1" class="input-small">
You can use any one of these classes;
您可以使用这些类中的任何一个；
class="input-small"
class="input-medium"
class="input-large"
class="input-xlarge"
class="input-xxlarge"
回答by Pawan Pillai
I did a workaround by creating a new css class in my custom stylesheet as follows:
我通过在我的自定义样式表中创建一个新的 css 类来做了一个解决方法，如下所示：
.selectwidthauto
{
width:auto !important;
}
And then applied this class to all my select elements either manually like:
然后将此类手动应用于我所有的选择元素，例如：
<select id="State" class="selectwidthauto">
...
</select>
Or using jQuery:
或者使用 jQuery：
$('select').addClass('selectwidthauto');
回答by user2653789
In bootstrap 3, it is recommended that you size inputs by wrapping them in col-**-#div tags. It seems that most things have 100% width, especially .form-controlelements.
在引导程序 3 中，建议您通过将输入包装在col-**-#div 标签中来调整输入的大小。似乎大多数东西都有 100% 的宽度，尤其是.form-control元素。
回答by Moghira
You can use something like this
你可以使用这样的东西
<div class="row">
<div class="col-xs-2">
<select id="info_type" class="form-control">
<option>College</option>
<option>Exam</option>
</select>
</div>
</div>
回答by Sean Grueboeck
For me Pawan'scss class combined with display: inline-block(so the selects don't stack) works best. And I wrap it in a media-query, so it stays Mobile Friendly:
对我来说，Pawan 的css 类与display: inline-block（因此选择不堆叠）结合使用效果最好。我将它包装在媒体查询中，因此它保持移动友好：
@media (min-width: $screen-xs) {
.selectwidthauto {
width:auto !important;
display: inline-block;
}
}
回答by KristKing
with bootstrap use class input-md = medium, input-lg = large, for more info see https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
使用引导程序使用类 input-md = medium，input-lg = large，有关更多信息，请参阅https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
回答by Jukka K. Korpela
Tested alone, <select class=input-xxlarge>sets the content width of the element to 530px. (The total width of the element is slightly smaller than that of <input class=input-xxlarge>due to different padding. If this a a problem, set the paddings in your own style sheet as desired.)
单独测试，<select class=input-xxlarge>将元素的内容宽度设置为 530px。（元素的总宽度<input class=input-xxlarge>因padding不同而略小于元素的宽度。如果出现此问题，请根据需要在您自己的样式表中设置padding。）
So if it does not work, the effect is prevented by some setting in your own style sheet or maybe in the use other settings for the element.
因此，如果它不起作用，效果会被您自己的样式表中的某些设置或可能在元素的其他设置中阻止。
