Bootstrap 3.0: Comment avoir du texte et des entrées sur la même ligne?

Je passe actuellement mon site Web à Bootstrap 3.0. J’ai un problème avec l’entrée de formulaire et la mise en forme du texte. Ce qui a fonctionné dans Bootstrap 2 ne fonctionne pas dans Bootstrap 3.

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

Comment pourrais-je obtenir tout le texte et la saisie sur une seule ligne? Je voudrais que l’exemple bootstrap 3 ressemble à l’exemple bootstrap 2 dans le jsfiddle.

JS exemple de violon

Format used to look like this in Bootstrap 2

+/- 14 Days


BootStrap 3 Version

+/- 14 Days

Mise à jour: je change le code à ceci qui fonctionne mais a des problèmes d’alignement maintenant. Des idées?

 
Economy Premium Economy Club World First Class

Je mettrais chaque élément que vous voulez en ligne dans un col-md- * div distinct dans votre ligne. Ou forcer vos éléments à afficher en ligne. La classe form-control affiche un bloc car c’est ce que pense le bootstrap.

Directement de la documentation http://getbootstrap.com/css/#forms-horizontal .

Utilisez les classes de grid prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale en ajoutant .form-horizontal au formulaire (qui ne doit pas nécessairement être un

). Cela modifie les .form-groups pour qu’ils se comportent comme des lignes de grid, donc pas besoin de .row .

Échantillon:

 

Ce dont vous avez besoin est la classe .form-inline . Vous devez cependant faire attention avec la nouvelle classe .form.inline , vous devez spécifier la largeur de chaque contrôle.

Regardez ça

Aucun de ceux-ci ne fonctionnait pour moi, il fallait utiliser la .form-control-static .

http://getbootstrap.com/css/#forms-controls-static

Vous pouvez le faire comme ceci:

 

Violon

La façon dont je l’ai résolu était simplement d’append un remplacement pour toutes mes zones de texte sur le css principal de mon site, comme ceci:

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

donne juste mère de div “class =” col-lg-12 “”

 

ce sera

 

s’il vous plaît vérifier le code mis à jour que nous devons utiliser

  form-control-static not only form-control 

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

Merci beaucoup

Ou vous pouvez le faire:

 
Return:

J’ai essayé chacune des suggestions ci-dessus et aucune n’a fonctionné. Je ne veux pas choisir un nombre fixe de colonnes dans la grid de 12 colonnes. Je veux l’invite, et l’entrée juste après, et je veux que les colonnes s’étirent si nécessaire.

Oui, je sais, c’est contre ce qu’est le bootstrap. Et vous ne devriez JAMAIS utiliser une table. Parce que DIV est tellement mieux que les tables. Mais le problème est que les tables, les lignes et les cellules fonctionnent réellement.

Oui, je sais vraiment qu’il y a des fanatiques de CSS, et la réaction instinctive n’est jamais jamais utiliser TABLE, TR et TD. Oui, je sais que DIV class = “table” avec DIV class = “row” et DIV class = “cell” est beaucoup mieux. Sauf quand ça ne marche pas, et il y a beaucoup de cas. Je ne crois pas que les gens devraient ignorer aveuglément ces situations. Il y a des moments où le TABLE / TR / TD fonctionnera très bien, et il n’y a pas de raison d’utiliser une approche plus compliquée et plus fragile simplement parce qu’elle est considérée plus élégante. Un développeur doit comprendre quels sont les avantages des différentes approches et les compromis, et il n’y a pas de règle absolue selon laquelle les DIV sont meilleurs.

“Un exemple concret – sur la base de cette discussion, j’ai converti quelques tds et trs existants en div. 45 minutes pour essayer de tout aligner les uns à côté des autres et j’ai abandonné. Les TD reviennent 10 secondes plus tard – ça marche – tout de suite – sur tous les navigateurs, rien de plus à faire. S’il vous plaît, essayez de me faire comprendre – quelle justification avez-vous pour que je le fasse autrement? ” Voir [ https://stackoverflow.com/a/4278073/1758051%5D

Et ça: ”

La mise en page devrait être facile. Le fait qu’il y ait des articles écrits sur la façon d’obtenir une mise en page dynamic à trois colonnes avec en-tête et pied de page dans CSS montre qu’il s’agit d’un système de mise en page médiocre. Bien sûr, vous pouvez le faire fonctionner, mais il y a littéralement des centaines d’articles en ligne sur la façon de le faire. Il n’y a pratiquement pas de tels articles pour une mise en page similaire avec des tableaux parce que c’est manifestement évident. Peu importe ce que vous dites contre les tables et en faveur de CSS, ce fait annule tout: une disposition de base à trois colonnes dans CSS est souvent appelée “Le Saint Graal”. “[ https://stackoverflow.com/a/4964107/ 1758051]

Je n’ai pas encore vu un moyen de forcer les DIV à toujours s’aligner dans une colonne dans toutes les situations. Je continue à recevoir des exemples sortingviaux qui ne rencontrent pas vraiment les problèmes. “Responsive” consiste à fournir un moyen de ne pas toujours s’aligner dans une colonne. Cependant, si vous voulez vraiment une colonne, vous pouvez perdre des heures à essayer de faire fonctionner DIV. Quelquefois, vous devez utiliser la technologie appropriée, peu importe ce que disent les fanatiques.