Bootstrap 3: comment faire pour créer une ligne de formulaire avec les sélectionne et les étiquettes?
Mes étiquettes garder apparaissant au-dessus de la sélectionne. Je les veux tous sur la même ligne. Pls voir la jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/
<div class="well well-sm">
<form name="myForm" role="form" novalidate="novalidate" class="form-inline">
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select ng-model="form.cband2" id="cband2" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<button class="btn btn-primary">Filter</button>
</form>
</div>
Vous devez vous connecter pour publier un commentaire.
Il y a une règle CSS de bootstrap qui définit la largeur de
.form-control
à 100% sur les petites tailles d'écran. Donc, même quand il flottait, il prendra toute la largeur et donc commencer sur une nouvelle ligne. Les bonnes nouvelles est que vous ne avez besoin que de quelques lignes de CSS pour le remplacer:Espère que cela simplifie le problème pour ceux qui sont encore confrontés à la question! http://jsfiddle.net/c3m77ah6/2/
Vous devez emballer votre
label
autour de laselect
. Comme ceci:Et puis ajoutez le code CSS suivant:
Est ici mise à jour de votre violon: Mis À Jour Le Violon
Ce problème est donc recorrent qu'il y a un projet Github résoudre
https://fk.github.io/select2-bootstrap-css/
Lieu de leur fichier CSS à droite après le CSS de Select2
Ensuite, vous pouvez utiliser l'étiquette avec le sélectionner
Il fonctionne si vous utilisez la dernière bootstrap:
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
Et s'il vous plaît N'OUBLIEZ PAS de faire une colonne avec un résultat de plus de 768px. Formulaire en ligne ne fonctionne que si l'écran avec plus de 768px. (Il suffit de glisser la colonne avec une souris un peu)
Le problème était avec le css pour
form-inline classe avec le formulaire-groupe va faire le travail comme
démo : http://jsfiddle.net/9arahevn/2/