webentwicklung-frage-antwort-db.com.de

Wie kann man mehrere Bootstrap-Eingänge in dieselbe Zeile setzen?

Ich habe folgendes HTML:

<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

Es macht so:

enter image description here

Wie bekomme ich beide Eingänge und die Schaltfläche in derselben Zeile? Ich habe mich mit dem CSS herumgespielt, aber es scheint nicht, dass es funktioniert. Ich konnte es mit einem Tisch zum Laufen bringen, aber ich weiß, dass eine CSS-Lösung "besser" wäre.

csstwitter-bootstraptwitter-bootstrap-3
7
Nate

Sie können Inline-Formulare wie in der Bootstrap-Dokumentation hier verwenden: https://getbootstrap.com/docs/3.4/css/#forms-inline

Die Klasse "Form-Inline" ist wahrscheinlich das, wonach Sie suchen.

13
Kilreaux

Option 1 - Inline-Formulare: 

verwenden Sie die .form-Inline-Klasse, um eine Reihe von Formularsteuerelementen und .__ anzuzeigen. Tasten in einer einzigen horizontalen Reihe

aber

sie müssen möglicherweise die Breite und Ausrichtung manuell festlegen

Option 2 - Verwenden des Gitters:

für strukturiertere Formularlayouts, die auch reaktionsschnell sind, können Sie die vordefinierten Grid-Klassen von Bootstrap verwenden

Ihr Code wurde an Option 2 angepasst. Sie können die Breite der Elemente durch Ändern von col-md- * ändern.

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

Und so sieht es aus Anzeige von Inline-Elementen in Form mithilfe des Rasters

5
addmoss

Verwenden Sie das Rasterlayout mit der xs-Telefongröße, um das Antwortverhalten des Rasters zu erzwingen. Das Raster ist in 12 Zellen unterteilt, sodass Sie 3 x 4 benötigen.

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

Sie könnten auch eine davon größer als die anderen haben: 

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

Solange sie sich zu 12 addieren.

Demo

Bootstrap Grid

1
oqx

In Bootstrap 4 verwenden Sie mehrere 

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