Bootstrap 3.0: Comment avoir du texte et un champ de saisie sur la même ligne?

Question

Je suis en train de passer mon site web à Bootstrap 3.0. J'ai un problème avec les saisies de formulaire et le formatage du texte. Ce qui fonctionnait avec Bootstrap 2 ne fonctionne pas avec Bootstrap 3.

Comment puis-je placer du texte sur la même ligne avant et après une saisie de formulaire? J'ai réduit le problème à un souci avec la classe 'form-control' dans la version Bootstrap 3 de l'exemple.

Comment pourrais-je mettre tout le texte et la saisie sur une seule ligne? J'aimerais que l'exemple Bootstrap 3 ressemble à l'exemple Bootstrap 2 dans le jsfiddle.

Exemple JSFiddle

Mise à jour : j'ai modifié le code pour cela qui fonctionne mais j'ai des problèmes d'alignement maintenant. Des idées?

Answer 1

Just give mother of div ""

ce sera

Answer 2

La manière dont j'ai résolu le problème a simplement été d'ajouter une substitution pour tous mes zones de texte dans la feuille de style principale de mon site, comme ceci :

.form-control {
    display:initial !important;
}

Answer 3

Dans Bootstrap 4 pour l'élément Horizontal, vous pouvez utiliser .row avec les classes .col-* pour spécifier la largeur de vos libellés et contrôles. voir ce lien.

Et si vous souhaitez afficher une série de libellés, de contrôles de formulaire et de boutons sur une seule ligne horizontale, vous pouvez utiliser .form-inline pour plus d'informations consulter ce lien

Answer 4

Tous veuillez vérifier le code mis à jour car nous devons utiliser

 form-control-static pas seulement form-control

http://jsfiddle.net/tusharD/58LCQ/34/

merci cordialement

Answer 5

Ou vous pouvez faire ceci :

    Return:

J'ai essayé chacune des suggestions ci-dessus et aucune d'entre elles n'a fonctionné. Je ne veux pas choisir un nombre fixe de colonnes dans la grille de 12 colonnes. Je veux la mention, et l'entrée juste après, et je veux que les colonnes s'étirent selon les besoins.

Oui, je sais, cela va à l'encontre de ce qu'est tout Bootstrap. Et vous ne devriez JAMAIS utiliser un tableau. Parce que DIV est tellement mieux que les tableaux. Mais le problème est que les tableaux, les lignes et les cellules fonctionnent réellement.

OUI - JE SAIS TRES BIEN qu'il y a des zélotes du CSS, et la réaction automatique est de ne jamais jamais jamais utiliser TABLE, TR et TD. Oui, je sais que DIV class="table" avec DIV class="row" et DIV class="cell" est bien meilleur. Sauf quand ça ne fonctionne pas, et il y a de nombreux cas. Je ne crois pas que les gens devraient aveuglément ignorer ces situations. Il y a des moments où le TABLE/TR/TD fonctionnera très bien, et il n'y a aucune raison d'utiliser une approche plus compliquée et plus fragile simplement parce qu'elle est considérée comme plus élégante. Un développeur devrait comprendre quels sont les avantages des différentes approches, les compromis, et il n'y a pas de règle absolue stipulant que les DIV sont meilleurs.

"Un exemple - sur la base de cette discussion, j'ai converti quelques td et tr existants en divs. 45 minutes à essayer de tout faire aligner côte à côte et j'ai abandonné. Les TD sont revenus 10 secondes plus tard - ça marche - directement - sur tous les navigateurs, rien d'autre à faire. S'il vous plaît, essayez de me faire comprendre - quelle justification possible avez-vous pour vouloir que je fasse différemment!" Voir [[https://stackoverflow.com/a/4278073/1758051\]](https://stackoverflow.com/a/4278073/1758051])

Et ceci : "

La mise en page devrait être facile. Le fait qu'il y ait des articles écrits sur la manière d'obtenir une mise en page dynamique à trois colonnes avec en-tête et pied de page en CSS montre qu'il s'agit d'un mauvais système de mise en page. Bien sûr, vous pouvez le faire fonctionner, mais il existe littéralement des centaines d'articles en ligne sur la manière de le faire. Il n'y a pratiquement pas d'articles similaires pour une mise en page avec tableaux car c'est évident. Peu importe ce que vous dites contre les tableaux et en faveur du CSS, ce seul fait ruine tout : une mise en page de base à trois colonnes en CSS est souvent appelée "Le Graal"." [[https://stackoverflow.com/a/4964107/1758051\]](https://stackoverflow.com/a/4964107/1758051])

Je n'ai pas encore vu de moyen de forcer les DIVs à toujours s'aligner dans une colonne dans toutes les situations. Je continue de voir des exemples triviaux qui ne rencontrent pas vraiment les problèmes. "Responsive" consiste à fournir un moyen pour qu'ils ne s'alignent pas toujours dans une colonne. Cependant, si vous voulez vraiment une colonne, vous pouvez perdre des heures à essayer de faire fonctionner les DIV. Parfois, vous devez utiliser la technologie appropriée, peu importe ce que les zélotes disent.