Bootstrap 3.0: Comment avoir le texte et la saisie sur la même ligne?

Je passe actuellement mon site Web à Bootstrap 3.0. J'ai un problème avec la saisie 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 entrée de formulaire? Je l'ai réduit à un problème avec la classe «form-control» dans la version Bootstrap 3 de l'exemple.

Comment procéder pour 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.

Exemple de violon JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

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

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Je mettrais chaque élément que vous voulez en ligne dans un col-md- * div distinct dans votre ligne. Ou forcez vos éléments à s'afficher en ligne. La classe form-control affiche le bloc parce que c'est ainsi que bootstrap pense que cela devrait être fait.

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

Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale en les ajoutant .form-horizontalau formulaire (ce qui ne doit pas nécessairement être a <form>). Cela change .form-groupspour se comporter comme des lignes de grille, donc pas besoin de .row.

Échantillon:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Ce dont vous avez besoin, c'est la .form-inlineclasse. Vous devez cependant faire attention, avec la nouvelle .form.inlineclasse, vous devez spécifier la largeur pour chaque contrôle.

Jetez un œil à ceci

Aucun de ceux-ci n'a fonctionné pour moi, a dû utiliser la .form-control-staticclasse.

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

Vous pouvez le faire comme ceci:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Violon

donne juste la mère de div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

ce sera

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

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

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

tous s'il vous plaît vérifier le code mis à jour car nous devons utiliser

 form-control-static not only form-control

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

Merci beaucoup

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

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

Ou vous pouvez faire ceci:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

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

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

OUI - JE SAIS VRAIMENT qu'il y a des fanatiques CSS, et la réaction instinctive est de ne 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 de nombreux cas. Je ne pense 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 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 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.

"Exemple concret - sur la base de cette discussion, j'ai converti quelques tds existants et très en divs. 45 minutes de déconner avec ça en essayant de tout aligner les uns à côté des autres et j'ai abandonné. Les TDs de retour dans 10 secondes plus tard - fonctionne - tout de suite - sur tous les navigateurs, plus rien à faire. Essayez de me faire comprendre - quelle justification avez-vous pour vouloir que je le fasse autrement! " Voir [ https://stackoverflow.com/a/4278073/1758051]

Et ça: "

La mise en page doit être simple. Le fait qu'il y ait des articles écrits sur la façon de réaliser une mise en page dynamique à trois colonnes avec en-tête et pied de page en 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 existe littéralement des centaines d'articles en ligne sur la façon de le faire. Il n'y a pratiquement pas d'articles de ce type pour une mise en page similaire avec des tableaux, car c'est manifestement évident. Peu importe ce que vous dites contre les tables et en faveur du CSS, ce fait annule tout: une disposition de base à trois colonnes en 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 reçois constamment des exemples triviaux qui ne posent pas vraiment de 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. Parfois, vous devez utiliser une technologie appropriée, peu importe ce que disent les fanatiques.