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 use class input-md = medium，input-lg = large，有关详细信息，请参阅https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

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

7 个答案: