web-dev-qa-db-fra.com

Changer la largeur de la balise select dans Twitter Bootstrap

Comment modifier la largeur d'un champ de sélection lors de l'utilisation de Twitter bootstrap? Ajouter input-xxlarge Les classes CSS ne semblent pas fonctionner (comme c'est le cas sur d'autres éléments de formulaire), donc les éléments de ma liste déroulante sont actuellement coupés.

csstwitter-bootstraptwitter-bootstrap-2
43
grautur

Cela me permet de réduire la largeur de la balise sélectionnée.

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

Vous pouvez utiliser n'importe laquelle de ces classes.

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"
69
Shakeeb Ahmad

J'ai résolu ce problème en créant une nouvelle classe css dans ma feuille de style personnalisée, comme suit:

.selectwidthauto
{
     width:auto !important;
}

Et ensuite, j'ai appliqué cette classe à tous mes éléments sélectionnés manuellement, comme ceci:

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

Ou en utilisant jQuery:

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

Dans bootstrap 3, il est recommandé de dimensionner les entrées en les encapsulant dans col-**-# balises div. Il semble que la plupart des choses ont 100% de largeur, en particulier .form-control éléments.

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

20
user2653789

Vous pouvez utiliser quelque chose comme ça

<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

Pour moi la classe css de Pawan combinée avec display: inline-block (afin que les sélections ne s'empilent pas) fonctionne mieux. Et je l'enveloppe dans une requête de média, de sorte qu'il reste Mobile Friendly:

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

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

}
6
Sean Grueboeck

with bootstrap utilise la classe input-md = medium, input-lg = large, pour plus d'informations, voir https://getbootstrap.com/docs/3.3/css/#forms- tailles de contrôle

0
KristKing

Testé seul, <select class=input-xxlarge> définit la largeur du contenu de l'élément sur 530px. (La largeur totale de l'élément est légèrement inférieure à celle de <input class=input-xxlarge> en raison d'un rembourrage différent. Si cela vous pose problème, définissez les rembourrages dans votre propre feuille de style selon vos besoins.)

Ainsi, si cela ne fonctionne pas, l'effet est empêché par certains réglages de votre propre feuille de style ou éventuellement par l'utilisation d'autres réglages pour l'élément.

0
Jukka K. Korpela