web-dev-qa-db-fra.com

Comment mettre plusieurs entrées Bootstrap sur la même ligne?

J'ai le code HTML suivant:

<input type="text" class="form-control" name="watch" value="" placeholder="watch">

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>

<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>

JSFIDDLE

Cela rend comme ceci:

enter image description here

Comment puis-je obtenir les deux entrées et le bouton sur la même ligne? Je me suis amusé avec le CSS, mais je n'arrive pas à le faire fonctionner. Je pouvais le faire fonctionner avec une table, mais je sais qu'une solution CSS serait "meilleure".

csstwitter-bootstraptwitter-bootstrap-3
7
Nate

Vous pouvez utiliser des formulaires en ligne, comme dans la documentation Bootstrap, disponibles ici: https://getbootstrap.com/docs/3.4/css/#forms-inline

La classe "formulaire en ligne" est probablement ce que vous recherchez.

13
Kilreaux

Option 1 - Formulaires en ligne: 

utilisez la classe .form-inline pour afficher une série de contrôles de formulaire et boutons sur une seule rangée horizontale

mais

vous devrez peut-être régler manuellement la largeur et l'alignement

Option 2 - Utiliser la grille:

pour des mises en forme plus structurées et réactives, vous pouvez utiliser les classes de grille prédéfinies de Bootstrap

Votre code est adapté à l'option 2. Vous pouvez contrôler la largeur des éléments en modifiant col-md- *.

<div class="form-group row"> 

  <div class="col-md-8" >
   <input type="text" class="form-control" name="watch" value="" placeholder="watch">
  </div>

  <div class="col-md-2" > 
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
    </div>
  </div>

  <div class="col-md-2">
    <span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
  </div>
</div>

Et voici à quoi ça ressemble Afficher les éléments inline dans le formulaire en utilisant la grille

5
addmoss

Utilisez une disposition de grille avec une taille de téléphone xs pour forcer la grille à réagir, la grille étant divisée en 12 cellules, il vous faudra 3 x 4.

<div class="row">
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
</div>

Vous pourriez aussi en avoir un plus gros que les autres: 

<div class="row">
   <div class="col-xs-7">
   </div>
   <div class="col-xs-3">
   </div>
   <div class="col-xs-2">
   </div>
</div>

Tant qu'ils totalisent 12.

Démo

Grille Bootstrap

1
oqx

Dans Bootstrap 4, vous utilisez plusieurs 

<div class="col"></div>
0
luky