wake-up-neo.com

Bootstrap form-horizontale vertikale Ausrichtung von Ankreuzfeldern ohne Beschriftungstext

Ich habe heute morgen von Bootstrap 3.0.0 auf 3.2.0 gewechselt, da ich einige der neuen Funktionen für meine Webanwendung benötigte. Alles schien wie erwartet zu funktionieren, bis ich ein Problem mit der vertikalen Ausrichtung von Kontrollkästchen in einem .form-horizontal-Formular feststellte.

Ein Beispiel ist unter http://www.bootply.com/AYN64feYze verfügbar. Das Markup für dieses Mindestbeispiel lautet:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

Wenn ein Kontrollkästchen keinen folgenden Text enthält, wird es unter die Zeile verschoben, in der es angezeigt werden soll.

Gibt es eine Lösung für dieses Problem? Da ich bereits das führende Label habe, brauche ich für meine Checkboxen keinen folgenden Text. Meine aktuelle Problemumgehung ist das Hinzufügen von Text zu <label>, der den <input type="checkbox"> enthält, und die Hintergrundfarbe als Schriftfarbe verwenden, um den Text auszublenden.

Danke für deine Hilfe.

8
Thylossus

Ich bin nicht sicher, ob sich dies auf das restliche Formularlayout auswirkt. Das Problem scheint jedoch gelöst zu sein, wenn Sie das Anzeigeattribut von <label> (derzeit auf inline-block) in Folgendes ändern:

label{
    display:inline;
}

Hier ist ein aktualisierter Bootply . Hoffe das hilft! Lassen Sie mich wissen, wenn Sie Fragen haben.

7
Serlite

Das hat für mich funktioniert:

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>    

Zuerst musste ich das <div class='checkbox'>-Element entfernen. Ich habe dann die folgenden Änderungen am Element der Checkbox vorgenommen:

  1. Platzieren Sie das Label in einer eigenen Spalte div <div class="col-lg-3"></div>
  2. Remove class = "control-label"
  3. Fügen Sie class = "pull-right" hinzu.

Am Ende erhielt ich ein Kontrollkästchen, das horizontal und die Beschriftung vertikal mit den anderen Eingaben ausgerichtet war.

2
Nathan Agersea

Wenn Sie für die Kontrollkästchen keinen folgenden Text benötigen, entfernen Sie einfach den <label>, der die Kontrollkästchen umgibt. So.

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

Dieser Code schien in Ihrem Bootply zu funktionieren, als ich es ausprobierte.

Denken Sie daran, ob Sie über ein Label verfügen, um das for-Attribut für Bildschirmleseprogramme zu verwenden, und um es Ihren Benutzern zu erleichtern (sie können statt des Kontrollkästchens einfach auf das Label klicken).

0
Rob Quincey