更改Twitter中選擇標籤的寬度引導程序

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

單獨測試，<select class=input-xxlarge>將元素的內容寬度設置爲530px。 （元素的總寬度由於不同的填充而略小於<input class=input-xxlarge>）如果這是個問題，請根據需要在自己的樣式表中設置填充。）

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

Answer 3

我做了一個解決辦法在我的自定義樣式表創建新的CSS類，如下所示：

.selectwidthauto 
{ 
    width:auto !important; 
} 

，然後應用這個類來我所有的選擇元素手動像：

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

或使用jQuery：

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

Answer 4

在引導程序3中，建議您通過將它們包裝在col-**-# div標記中來確定輸入大小。看來大多數東西都有100％的寬度，尤其是.form-control元素。

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

Answer 5

對我來說爬完的 CSS類顯示器結合：inline-block的（所以選擇不疊加）效果最好。我把它包在媒體查詢，所以它保持移動友好：

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

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

} 

Answer 6

您可以使用類似這樣

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

與引導使用類輸入-MD =中等，input-lg = large，更多信息請參見https://getbootstrap.com/docs/3.3/css/#forms-control-sizes