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

Question

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

Answer 1

这对我来说可以减少选择标签的宽度;

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

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

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"

Answer 2

我通过在自定义样式表中创建一个新的css类来做一个解决方法，如下所示：

.selectwidthauto
{
     width:auto !important;
}

然后手动将此类应用于我的所有选择元素：

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

或者使用jQuery：

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

Answer 3

在bootstrap 3中，建议您通过将输入包装在col-**-# #div标签中来调整输入大小。 似乎大多数东西都有100％的宽度，特别是.form-control元素。

https://getbootstrap.com/docs/3.3/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 （所以选择不堆栈）效果最好。 我将它包装在媒体查询中，因此它保持移动友好：

@media (min-width: $screen-xs) {

    .selectwidthauto {
         width:auto !important;
         display: inline-block;
    }

}

Answer 6

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

因此，如果它不起作用，则可以通过您自己的样式表中的某些设置或使用该元素的其他设置来阻止效果。

Answer 7

使用bootstrap使用class input-md = medium，input-lg = large，有关详细信息，请参阅https://getbootstrap.com/docs/3.3/css/#forms-control-sizes