web-dev-qa-db-ja.com

Twitterの選択タグの幅を変更するBootstrap

Twitterブートストラップを使用するときに、選択フィールドの幅を変更するにはどうすればよいですか？ input-xxlarge CSSクラスを追加しても機能しないようです（他のフォーム要素で行うように）。したがって、ドロップダウンの要素は現在切り取られています。

csstwitter-bootstraptwitter-bootstrap-2
43
grautur

これは、選択タグの幅を減らすのに役立ちます。

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

これらのクラスのいずれかを使用できます。

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"
69
Shakeeb Ahmad

次のように、カスタムスタイルシートに新しいcssクラスを作成して回避策を実行しました。

.selectwidthauto
{
     width:auto !important;
}

そして、このクラスをすべての選択要素に手動で適用しました：

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

またはjQueryを使用：

$('select').addClass('selectwidthauto');
23
Pawan Pillai

bootstrap 3では、入力をcol-**-# divタグ。ほとんどの場合、100％の幅、特に.form-control要素。

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

20
user2653789

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

<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

11
Moghira

私にとってはPawan'scssクラスとdisplay：inline-block（したがって、選択はスタックしません）と組み合わせた場合に最適です。また、メディアクエリでラップしているため、モバイルフレンドリーのままです。

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

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

}
6
Sean Grueboeck

with bootstrap use class input-md = medium、input-lg = large、詳細については https://getbootstrap.com/docs/3.3/css/#forms- control-sizes

0
KristKing

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

動作しない場合は、独自のスタイルシートの設定または要素の他の設定を使用することにより、効果が防止されます。

0
Jukka K. Korpela