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.
InformationsquelleAutor Collector | 2013-11-11