在Twitter Bootstrap中更改select标签的宽度

使用Twitter引导程序时，如何更改select字段的宽度？ 添加input-xxlarge CSS类似乎不起作用（就像在其他表单元素上那样），所以我的下拉列表中的元素被截断。

Answer 1

这对我来说减lessselect标签的宽度;

 <select id ="Select1" class="input-small"> 

你可以使用这些类中的任何一个;

 class="input-small" class="input-medium" class="input-large" class="input-xlarge" class="input-xxlarge" 

Answer 2

我做了一个解决方法，在我的自定义样式表中创build一个新的CSS类，如下所示：

 .selectwidthauto { width:auto !important; } 

然后将这个类应用到我的所有select元素，手动如下：

 <select id="State" class="selectwidthauto"> ... </select> 

或者使用jQuery：

 $('select').addClass('selectwidthauto'); 

Answer 3

在引导程序3中，build议您通过将它们包含在col-**-# ＃div标记中来确定input的大小。 似乎大多数东西都有100％的宽度，特别是.form-control元素。

http://getbootstrap.com/css/#forms-control-sizes

Answer 4

你可以使用这样的东西

 <div class="row"> <div class="col-xs-2"> <select id="info_type" class="form-control"> <option>College</option> <option>Exam</option> </select> </div> </div> 

http://getbootstrap.com/css/#column-sizing

Answer 5

对我来说， Pawan的 css类与display：inline-block （所以select不堆叠）效果最好。 我把它包装在一个媒体查询中，所以它保持移动友好：

 @media (min-width: $screen-xs) { .selectwidthauto { width:auto !important; display: inline-block; } } 

Answer 6

单独testing， <select class=input-xxlarge>将元素的内容宽度设置为530px。 （由于不同的填充，元素的总宽度略小于<input class=input-xxlarge>的元素的宽度。如果这是一个问题，请根据需要在您自己的样式表中设置填充。

所以，如果它不起作用，那么通过在你自己的样式表中设置一些设置，或者使用元素的其他设置来防止这种效果。

Answer 7

与引导使用类inputMDD =中，inputLG =大，更多信息请参阅http://getbootstrap.com/css/#forms-control-sizes