Changer la largeur de la balise de sélection dans Twitter Bootstrap
7 réponses
cela fonctionne pour moi de réduire la largeur de la balise select;
<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"
j'ai contourné le problème en créant une nouvelle classe css dans ma feuille de style personnalisée comme suit:
.selectwidthauto
{
width:auto !important;
}
et ensuite appliqué cette classe à tous mes éléments select soit manuellement comme:
<select id="State" class="selectwidthauto">
...
</select>
Ou à l'aide de jQuery:
$('select').addClass('selectwidthauto');
dans bootstrap 3, il est recommandé de dimensionner les entrées en les emballant dans col-**-# les balises div. Il semble que la plupart des choses ont une largeur de 100%, surtout .form-control éléments.
Vous pouvez utiliser quelque chose comme ceci
<div class="row">
<div class="col-xs-2">
<select id="info_type" class="form-control">
<option>College</option>
<option>Exam</option>
</select>
</div>
</div>
Pour moi Pawan est classe css combinée avec display: inline-block (donc les sélections ne s'empilent pas) fonctionne le mieux. Et je l'envelopper dans un media-query, afin qu'il reste Mobile Friendly:
@media (min-width: $screen-xs) {
.selectwidthauto {
width:auto !important;
display: inline-block;
}
}
Testé seul, <select class=input-xxlarge> définit la largeur de contenu de l'élément à 530px. (La largeur totale de l'élément est légèrement plus petite que celle de <input class=input-xxlarge> en raison de différents rembourrage. Si ce un problème, réglez les paddings dans votre propre feuille de style comme souhaité.)
Donc si cela ne fonctionne pas, l'effet est empêché par certains paramètres dans votre propre feuille de style ou peut-être dans l'utilisation d'autres paramètres de l'élément.
avec bootstrap utiliser la classe d'entrée-md = moyen, entrée-lg = grand, pour plus d'informations, reportez-vous à https://getbootstrap.com/docs/3.3/css/#forms-control-sizes