css - Twitter Bootstrap で select タグの幅を変更する

Question

Twitter ブートストラップを使用している場合、選択フィールドの幅を変更するにはどうすればよいですか? CSS クラスの追加input-xxlargeが (他のフォーム要素の場合と同様に) 機能しないように見えるため、現在、ドロップダウンの要素が切り取られています。

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

このようなものを使用できます

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

私にとっては、 Pawan のcss クラスとdisplay: inline-blockを組み合わせたもの(選択がスタックしないようにするため) が最適です。そして、メディアクエリでラップするので、モバイルフレンドリーのままです:

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

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

}

Answer 5

単独でテスト<select class=input-xxlarge>すると、要素のコンテンツの幅が 530px に設定されます。(パディングが異なるため、要素の合計幅は の幅よりもわずかに小さくなり<input class=input-xxlarge>ます。これが問題である場合は、必要に応じて独自のスタイル シートでパディングを設定してください。)

したがって、それが機能しない場合は、独自のスタイル シートの設定によって、または要素に他の設定を使用することによって効果が妨げられます。