web-dev-qa-db-fra.com

Bootstrap 3: comment créer un formulaire en ligne avec selects et labels?

Mes étiquettes continuent d'apparaître au-dessus des sélections. Je les veux tous sur la même ligne. Voir le 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>
htmltwitter-bootstrap-3
20
Jason

Dans Bootstrap, une règle CSS définit la largeur de .form-control à 100% pour les écrans de petite taille. Ainsi, même une fois flotté, il prendra toute la largeur et démarrera donc sur une nouvelle ligne. La bonne nouvelle est que vous n'avez besoin que de quelques lignes de CSS pour le remplacer:

.form-control {
width:auto;
display:inline-block;
}

J'espère que cela simplifie le problème pour tous ceux qui sont encore confrontés au problème! http://jsfiddle.net/c3m77ah6/2/

12
ryantdecker

Vous devez envelopper votre label autour de select. Comme ça:

<div class="form-group">
  <label>C-Band
      <select id="cband" class="form-control">
         <option value="C15+">C15+</option>
         <option value="C12-14">C12-14</option>
         <option value="Other">Other</option>
      </select>
  </label> 
</div>

Et puis ajoutez le CSS suivant:

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Voici votre violon mis à jour: Mise à jour Fiddle

7
Sebsemillia

Ce problème est tellement récent qu'il y a un projet Github qui le résout

https://fk.github.io/select2-bootstrap-css/

Placez leur fichier CSS juste après le CSS de Select2

<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">

Ensuite, vous pouvez utiliser l'étiquette avec le select 

<div class="form-group">
    <label for="sName">Select Title</label>
    <select class="js-example-basic-single form-control" id="sName">
    </select>
</div>
1
Hoku

classe en ligne avec groupe de forme fera le travail comme 

<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>             
    <select class="form-control" id="rotit">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>
</div>

démo: http://jsfiddle.net/9arahevn/2/

0
user889030