44

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

4

7 回答 7

70

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

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

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

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"
于 2012-12-06T23:51:11.813 回答
23

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

.selectwidthauto
{
     width:auto !important;
}

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

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

或者使用 jQuery：

$('select').addClass('selectwidthauto');
于 2013-07-05T06:03:09.860 回答
20

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

https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

于 2014-03-02T17:02:22.547 回答
12

你可以使用这样的东西

<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

于 2015-08-17T11:42:44.237 回答
6

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

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

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

}
于 2015-03-11T09:39:19.073 回答
0

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

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

于 2012-08-22T05:41:24.870 回答
0

使用引导程序使用类 input-md = medium，input-lg = large，有关更多信息，请参阅https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

于 2016-08-31T13:17:16.813 回答