web-dev-qa-db-fra.com

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

Je suis en train de basculer mon site web vers 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 la saisie d'un 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 pour obtenir tout le texte et l'entrée sur une seule ligne? J'aimerais que l'exemple bootstrap 3 ressemble à l'exemple bootstrap 2 du 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 en ceci qui fonctionne mais ayant 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>
htmlhtml5formattingtwitter-bootstrap-3
86
fat fantasma

Je mettrais chaque élément que vous voulez en ligne dans un séparateur séparé col-md- * dans votre ligne. Ou forcez vos éléments à s'afficher en ligne. La classe de contrôle de formulaire affiche block car c'est ainsi que bootstrap pense que cela devrait être fait.

37
lomteslie

Tout droit 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 présentation horizontale en ajoutant .form-horizontal au formulaire (ce qui ne doit pas nécessairement être un <form>). Cela change alors .form-groups pour 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>
131
Denis Besic

Ce dont vous avez besoin, c'est de 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.

Jetez un oeil à ceci

21
Reza Shirazian

Aucune de ces méthodes ne fonctionnait pour moi, devait utiliser la classe .form-control-static.

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

13
hakunin

Vous pouvez le faire comme ça:

<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>

Fiddle

10
Paulo Fidalgo

La solution que j'ai trouvée consistait simplement à ajouter une substitution pour tous mes champs de texte sur le fichier CSS principal de mon site, comme suit:

.form-control {
    display:initial !important;
}
3
Hugo Nava Kopp

donnez simplement la mère de la 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>
3
welboy

tous 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

1
Tushar Dhingra