Inline Bootstrap Formularlayout mit Etiketten über Eingänge

Ich mag würde ein Formular mit dem folgenden Layout Bootstrap 3 mit erstellen:Inline Bootstrap Formularlayout mit Etiketten über Eingänge

enter image description here

Ich habe einen jsfiddle mit dem Versuch, hier: http://jsfiddle.net/quyB6/

und das Markup ich habe versucht:

<form> 
    <div class="form-group col-md-4"> 
     <label for="name" class="control-label">Line Height</label> 
     <input type="number" value='' class="form-control" id="lineHeight"> 
    </div> 
    <div class="form-group col-md-4"> 
     <label for="name" class="control-label">Padding Top</label> 
     <input type="number" value='' class="form-control" id="paddingTop" /> 
    </div> 
    <div class="form-group col-md-4"> 
     <label for="name" class="control-label">Padding Bottom</label> 
     <input type="number" value='' class="form-control" id="paddingBottom"> 
    </div> 
</div>

Quelle

2014-06-28 Chad Johnson

ich denke, die einfachste Lösung col-xs-4 den clas hinzuzufügen wäre, s von jedem div. Das wird sicherstellen, dass die Divs für das Beispiel-Beispiel inline sind. Darüber hinaus sollten Sie das Formular-Tag mit </form> schließen.

<form> 
    <div class="form-group col-xs-4 col-md-4"> 
     <label for="name" class="control-label">Line Height</label> 
     <input type="email" value='' class="form-control" id="name" placeholder="Ime"> 
    </div> 
    <div class="form-group col-xs-4 col-md-4"> 
     <label for="name" class="control-label">Padding Top</label> 
     <input type="email" value='' class="form-control" id="name" placeholder="Ime"> 
    </div> 
    <div class="form-group col-xs-4 col-md-4"> 
     <label for="name" class="control-label">Padding Bottom</label> 
     <input type="email" value='' class="form-control" id="name" placeholder="Ime"> 
    </div> 
</form>

Quelle

2014-06-28 23:15:49 nicholaschris

Wie funktioniert das, nebenbei bemerkt? Die Dokumentation besagt, dass das Hinzufügen der Klasse col-xs- besonders kleine Geräte (<768px) betrifft. Siehe http://getbootstrap.com/css/#grid-media-queries. –

Meine beste Schätzung wäre, dass das Ansichtsfenster (der HTML-Abschnitt) im JSFiddle-Beispiel in die <768px-Kategorie fällt. Wenn Sie das Fenster für die HTML-Ausgabe verkleinern, würde es wahrscheinlich inline gehen. – nicholaschris

Es bleibt eigentlich inline auf voller Breite: http://jsfiddle.net/quyB6/8/show/ –

ersetzen <label> Tag mit <div> und es wird perfekt auf aufreihen.

Quelle

2016-10-13 15:45:33 Jack

Leider funktioniert das seit v4-alpha.6 nicht mehr. :( –

Für Bootstrap v4 Sie d-flex flex-column verwenden können:

<div class="form-group col-md-4"> 
    <div class="d-flex flex-column"> 
     <label for="name" class="control-label">Line Height</label> 
     <input type="number" value='' class="form-control" id="lineHeight"> 
    </div> 
</div>

Quelle

2017-02-10 07:09:22

Danke! Nicht, dass Ihr Formular * nicht * die Klasse form-inline haben sollte, wenn Sie es mit Beschriftungen über Eingabefelder verwenden möchten – edwardmp

Inline Bootstrap Formularlayout mit Etiketten über Eingänge

Antwort

Verwandte Themen