Bootstrap 3 sélectionnez le format d'entrée inline
Je suis en train d'essayer d'obtenir l'entrée et sélectionnez l'option inline attachés les uns avec les autres comme cette démonstration à l'aide de Bootstrap 2.
Suivantes Bootstrap 3 des lignes directrices que j'arrive à faire ceci:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="form-group col-sm-5">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
</div>
<div class="form-group col-sm-3">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Il est réactif, mais d'entrée et sélectionnez ne peuvent pas être attachés sans une certaine mauvaise hacks css. J'ai trouvé beaucoup d'exemples joint avec les boutons, mais qui ne fonctionne pas avec l'élément select.
- Ils disent: "évitez d'utiliser des <select> éléments ici, car ils ne peuvent pas être entièrement de style dans les navigateurs WebKit" 🙁 Pourquoi jeter natif de l'élément html et utiliser un peu de css/js des astuces pour s'en inspirer?
- Je trouve aussi que fou. Et à l'aide ul li, au lieu de sélectionner l'option permet d'obtenir la valeur sélectionnée plutôt maladroit à l'aide de javascript.
Vous devez vous connecter pour publier un commentaire.
Je pense que j'ai accidentellement trouvé une solution. La seule chose à faire est d'insérer un vide
<span class="input-group-addon"></span>
entre les<input>
et la<select>
.En outre, vous pouvez le rendre "invisible" par la réduction de sa largeur, remplissage horizontal et frontières:
HTML:
Testé sur Chrome et FireFox.
Peut être fait avec du pur code d'Amorçage.
HTML:
Grâce à G_money et d'autres suggestions pour cette excellente solution pour la saisie de texte en ligne liste déroulante... voici une autre bonne solution.
Cela fonctionne avec Bootstrap 3: permettre l'entrée de texte en ligne avec une sélectionnez le menu déroulant. Voici à quoi il ressemble, ci-dessous...
input text
etselect
dans le mêmeform-group div
, et de style, les contrôles de formulairewidth
pour le faire fonctionner.Il nécessite un mineur CSS plus à le faire fonctionner avec Bootstrap 3:
CSS:
HTML:
Je n'arrive pas à faire ce travail sans hacks, donc ce que j'ai fait était juste utiliser le menu déroulant en place d'une zone de sélection et d'envoyer l'info par le biais d'un champ caché, comme (à l'aide de votre code):
http://bootply.com/93417
Jquery:
HTML:
Pas sûr si cela va fonctionner pour ce que vous voulez, mais c'est une option pour vous.
D'autre réponse à une vieille question. Cependant, j'ai trouvé une mise en œuvre spécifiquement pour bootstrap qui pourrait s'avérer utile ici. Espérons que cela aide quelqu'un qui est à la recherche...
Bootstrap-sélectionnez
Basé sur spacebean réponse, cette modification a aussi change le texte affiché à l'écran lorsque l'utilisateur sélectionne un élément différent (un peu comme un
<select>
ferait):http://www.bootply.com/VxVlaebtnL
HTML:
Jquery:
C'est la façon dont je l'ai fait sans css ou jquery:
Je sais c'est un peu vieux, mais j'ai eu le même problème et ma recherche m'a amené ici. Je voulais deux de sélectionner des éléments et d'un bouton en ligne, qui a travaillé dans le 2 mais pas le 3. J'ai fini par envelopper les trois éléments dans
<form class="form-inline">...</form>
. En fait, cela a fonctionné parfaitement pour moi.