Wie kann man Beschriftung und Eingabe in Bootstrap 3 vertikal ausrichten?

Lesezeit: 4 Minuten

Benutzer-Avatar
fettes fantasma

Wie kann man Beschriftung und Eingabe in Bootstrap 3 vertikal ausrichten? Ich möchte sowohl das Label als auch die Eingabe in derselben Zeile. Ich habe mit verschiedenen Klassen und benutzerdefiniertem CSS herumgespielt, aber nichts scheint zu funktionieren.

Die JSfiddle

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

Benutzer-Avatar
Ajiang

Die Bootstrap-3-Dokumente für horizontale Formen lassen Sie die verwenden .form-horizontal -Klasse, um Ihre Formularbeschriftungen und Eingaben vertikal auszurichten. Die Struktur für diese Formulare ist:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input1" class="col-lg-2 control-label">Label1</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="input1" placeholder="Input1">
    </div>
  </div>
  <div class="form-group">
    <label for="input2" class="col-lg-2 control-label">Label2</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="input2" placeholder="Input2">
    </div>
  </div>
</form>

Daher sollte Ihr Formular wie folgt aussehen:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <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 id="class_type" class="form-control input-lg" autocomplete="off">
                <option>Economy</option>
                <option>Premium Economy</option>
                <option>Club World</option>
                <option>First Class</option>
            </select>
        </div>
    </div>
</form>

  • Ihr zweites Beispiel hat das gleiche Ergebnis wie meins. Ich möchte alles auf einer Linie und richtig ausgerichtet haben. Hier ist die jsfiddle zu Ihrem Beispiel:jsfiddle.net/fatfantasma/6xH5s. Irgendwelche anderen Vorschläge?

    – fettes Fantasma

    29. August 2013 um 20:41 Uhr

  • Was für mich funktioniert hat, war das Hinzufügen form-horizontal zu meinem <div class="form-group"> was wahrscheinlich verpönt ist, aber bei mir hat es funktioniert! Dies war für mich erforderlich, da ich es benutzte form-inline. Meine endgültige Lösung sah also so aus <div class="form-inline"><div class="form-group form-horizontal"><label/><div class="col-md-5"><input/>

    – hvaughan3

    11. Februar 2016 um 16:12 Uhr

  • form-horizontal hat für mich funktioniert und mich davor bewahrt, CSS zu einzelnen Beschriftungen und Eingabefeldern hinzuzufügen. Vielen Dank!

    – Murtuza K

    18. Juli 2020 um 18:40 Uhr

Ich bin mir sicher, dass Sie Ihre Antwort inzwischen gefunden haben, aber für diejenigen, die noch nach einer Antwort suchen:

Wann Eingabe-lg verwendet wird, stimmen die Ränder nicht überein, es sei denn, Sie verwenden Form-Gruppe-lg zusätzlich zu Gruppe formen Klasse. Sein Beispiel ist in Dokumenten:

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Keine dieser Lösungen hat bei mir funktioniert. Aber ich war in der Lage, vertikale Zentrierung zu bekommen, indem ich benutzte <div class="form-row align-items-center"> für jede Formularzeile, pro Bootstrap-Beispiele.

  • Dies funktionierte perfekt, als nichts anderes zu funktionieren schien.

    – RubyJ

    9. August 2019 um 19:21 Uhr

  • <div class='form-group row align-items-center'> hat bei mir funktioniert

    – RTD

    4. November 2021 um 12:50 Uhr

Benutzer-Avatar
Blowsie

Das Problem ist, dass Sie <label> ist innerhalb eines <h2> -Tag und Header-Tags haben ein margin vom Standard-Stylesheet festgelegt.

Dies funktioniert perfekt für mich in Bootstrap 4.

<div class="form-row align-items-center">
   <div class="col-md-2">
     <label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
 </div>
 <div class="col-md-10">
    <input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
  /div>
</div>

1225580cookie-checkWie kann man Beschriftung und Eingabe in Bootstrap 3 vertikal ausrichten?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy