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

私にとってディスプレイと組み合わせるPawanの CSSクラス：インラインブロックは（その選択は累積しない）最も適しています。

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

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

} 

Answer 6

あなたは、ブートストラップ用クラス入力-MD =媒体とこの

<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

のようなものを使用することができます。そして、私はそれがモバイルフレンドリーにとどまるので、メディアクエリでそれを包みます、input-lg = large、詳細はhttps://getbootstrap.com/docs/3.3/css/#forms-control-sizes