更改Twitter中选择标签的宽度引导程序

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

2012-08-22 grautur

你能发布你的html吗？ – gaurang171

这适用于我减少选择标签的宽度;

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

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

class="input-small" 

class="input-medium" 

class="input-large" 

class="input-xlarge" 

class="input-xxlarge"

来源

2012-12-06 23:51:11

+24

只需要注意，这在引导程序3中不起作用。这些类现在只对控件的高度/填充有影响。 – Stefan

+14

对于twitter引导程序3，添加：.input-mini { width：60px; } .input-small { width：90px;输入介质{ }宽度：150px; } .input-large { width：210px; } .input-xlarge { width：270px; } 。input-xxlarge { width：530px; } –

一个负责任的（动态）解决方案会很好 –

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

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

来源

2012-08-22 05:41:24

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

.selectwidthauto 
{ 
    width:auto !important; 
}

，然后应用这个类来我所有的选择元素手动像：

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

或使用jQuery：

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

来源

2013-07-05 06:03:09

这是一个很好的解决方案。但是当3个下拉菜单被添加在一起时，这仍然使得这3个下拉菜单堆叠。 –

如果三年后你仍然需要帮助，那么你不需要帮助，那么你可以添加显示：inline-block，这样它们不会堆叠 –

在引导程序3中，建议您通过将它们包装在col-**-# div标记中来确定输入大小。看来大多数东西都有100％的宽度，尤其是.form-control元素。

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

来源

2014-03-02 17:02:22 user2653789

对我来说爬完的 CSS类显示器结合：inline-block的（所以选择不叠加）效果最好。我把它包在媒体查询，所以它保持移动友好：

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

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

}

来源

2015-03-11 09:39:19

您可以使用类似这样

<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-17 11:42:44 Moghira

与引导使用类输入-MD =中等，input-lg = large，更多信息请参见https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

来源

2016-08-31 13:17:16 KristKing

这只影响'select'元素的高度，而不是宽度。 – McVenco

更改Twitter中选择标签的宽度引导程序

回答

相关问题