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

Question

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

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;
    }

}