Afficher deux champs côte à côte dans un formulaire Bootstrap

J’essaie d’afficher une entrée de gamme sur un formulaire comportant deux zones de texte. Un pour le min et un pour le max et sont séparés par un tiret.

Je veux tout cela sur la même ligne en utilisant bootstrap, mais je n’arrive pas à le faire fonctionner correctement.

Voici mon code:

Voici à quoi ça ressemble maintenant:

capture d'écran

Que diriez-vous d’utiliser un groupe d’entrées pour le styliser sur la même ligne?

Voici le code HTML final à utiliser :

 
-

Ce qui ressemblera à ceci :

capture d'écran

Voici une démo de Stack Snippet :

  
-

Le problème est que la classe .form-control rend comme un élément DIV qui, selon le rendu normal-flow-of-the-page rendu sur une nouvelle ligne.

Une façon de résoudre ce problème consiste à utiliser display:inline property. Créez donc une classe CSS personnalisée avec display:inline et .form-control à votre composant avec une classe .form-control . Vous devez également avoir une width pour votre composant.

Il existe d’autres moyens de gérer ce problème (comme organiser vos composants de form-control dans l’une des classes .col ), mais le plus simple est de faire de votre .form-control un élément en inline (le rendu d’une span ).

Je ne sais pas si cela était disponible en 2014, mais vous pouvez maintenant.

Il ne fonctionne que sur des résolutions d’écran supérieures à 768px.

Valable pour BS 3.3.7:

   
-