Affichage de deux éléments sur une ligne

Question

J'ai un champ d'entrée bootstrap et une icône edin de font awesome. Actuellement, l'icône est affichée en dessous de la zone de saisie. Ce que j'essaie de faire, c'est de les afficher sur une seule ligne. Malheureusement, aussi simple que cela soit, je n'arrive pas à le faire fonctionner. J'ai essayé de faire flotter les éléments, de leur donner un inline-block et d'autres choses, mais cela n'a pas fonctionné. S'il vous plaît, aidez :

Answer 1

Selon la documentation bootstrap (http://getbootstrap.com/css/#forms-inline), vous pouvez utiliser le groupe d'entrées avec un addon pour mettre l'icône à l'intérieur de l'addon:

Answer 2

Vous devriez essayer display: flex; sur le conteneur et balise & align-self: center; seulement sur le .__

__

Voici un exemple :

.col-sm-2 {
  display: flex;
}

.col-sm-2 > i {
  display: flex;
  align-self: center;
  width: 30px;
}

Démonstration Fiddle

__

Answer 3

J'ai une solution simple par css. Tout d'abord, ajoutez une nouvelle classe à la colonne.

HTML=>>>

CSS=>>>

.myForm .form-control{
     float:left;
     width:calc(100% - 35px);
}
.myForm .fa{
     float:right;
     width:30px;
 }

Essayez ceci ... Voici la démo en direct sur jsfiddle

Une meilleure solution est le css de formulaire bootstrap. Suivez ce lien: http://getbootstrap.com/css/#forms