Ajouter une icône de Recherche dans la fin d'une entrée de groupe DANS le bootstrap 3

Formes ont changé depuis 2.4.3 et Cette aurait travaillé avant, mais pas plus.

C'est le code actuel, j'ai pour ma barre de recherche.

<li>
   <div class="input-group" id="fifteenMargin">
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   </div>
</li>

C'est à quoi il ressemble actuellement.

Ajouter une icône de Recherche dans la fin d'une entrée de groupe DANS le bootstrap 3

J'aimerais qu'il finit par ressembler à cela.

Ajouter une icône de Recherche dans la fin d'une entrée de groupe DANS le bootstrap 3

Bien que cette question est proche de ce cette une ses différents que c'est juste d'avoir un bouton sur l'extérieur, sans espace entre les deux. C'est la façon de l'obtenir dans la barre de recherche.

InformationsquelleAutor Jack | 2013-10-08
  1. 10

    Essayer cette..

    .input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
 box-shadow:none;
 -webkit-box-shadow:none; 
 border-color:#cccccc; 
}

    Vous pouvez utiliser une classe CSS au lieu d'annuler l'ensemble de la input-groups

    Démo: http://bootply.com/86446

    InformationsquelleAutor Zim
  2. 1

    essayer

    <div class="input-group">
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
    </span>
    <input type="text" name="login" class="form-control" placeholder="Ваш логин">
</div>
    InformationsquelleAutor Ivan
  3. 0

    Vous ne pouvez pas techniquement placer "à l'intérieur" de la zone de recherche, au lieu de placer votre soumettre SUR le champ de recherche via un positionnement absolu.

    InformationsquelleAutor dv8withn8
  4. 0

    Je me suis fait à l'aide de faux div.

    VIOLON

    .styleSelect {
    position:absolute;
    z-index:10;
  width: 168px;
  height: 34px;
  border: 1px solid #000;
}
    • N'utilisez pas la position absolue de ne pas traverser les navigateurs? Comme il peut ne pas être exacte si la modification de la largeur.
    InformationsquelleAutor vishalkin