web-dev-qa-db-fra.com

Bootstrap 3 mise à niveau entrée-annexe

J'effectue une mise à niveau vers Bootstrap 3, mais je ne vois pas comment mettre à niveau mes anciens ajouts d'entrée.

J'ai eu quelque chose comme ça:

<div class="input-append">
  <select>
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="btn" value="valami">
</div>

Aperçu: http://bootply.com/7591

Dans Bootstrap 3, c’est le plus proche que je puisse obtenir

<div class="input-group">
  <select class="form-control">
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="form-control btn btn-default" value="valami">
</div>

Aperçu: http://bootply.com/75912

Si je supprime cette durée, cela devient parfait, mais ils sont dans des lignes différentes.

Une idée de comment faire cela correctement?

twitter-bootstraptwitter-bootstrap-3
46
kviktor

Ceci est documenté ici et ici :

Supprimez input-prepend et input-append pour le singulier .input-group. Les classes ont changé pour les éléments à l'intérieur, et nécessitent un peu plus de balisage pour utiliser les boutons:

  • Utilisation .input-group comme classe parent autour de l’entrée et de l’addon.
  • Pour les ajouts/ajouts au texte, utilisez .input-group-addon au lieu de .addon.
  • Pour les boutons avant/après, utilisez .input-group-btn et placez votre .btn dans cet élément.

Exemple:

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-12 col-lg-3">
      <form class="form-search">
          <div class="input-group">
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-search">Search</button>
              </span>
          </div>
      </form>
    </div>
  </div>
</div>

EDIT: exemples de travail de @kviktor et @ max4ever:

http://bootply.com/75917

http://bootply.com/78014

83
elyase