Bootstrap Links ausrichten, checkbox in horizontaler form

Ich bin mit Bootstrap 3.3.7. Ich habe eine horizontale form mit einem label-weniger checkbox, wie diese:

<div class="container-fluid" style="max-width:600px">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="field1">Field 1:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field1"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field2">Field 2:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field2"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field3">Field 3:</label>
      <div class="col-sm-8">
        <!-- HERE IS THE CHECKBOX: -->
        <input class="form-control" type="checkbox" id="field3"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
        <button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
      </div>
    </div>
  </form>
</div>

Habe ich einen Bootply demo hier.

Das problem ist das Kontrollkästchen zentriert ist. Ich wollte, dass es Links ausgerichtet werden, so dass der linke Rand an den linken Rand des Textes Eingänge oben.

Wie mache ich das?

Habe ich versucht:

  • Hinzufügen Klasse text-left div enthält die checkbox (Ergebnis: keine Wirkung).
  • Entfernen der raster Breite Spezifizierer von der checkbox-div (Ergebnis: es endet nur bis auf die nächste Zeile).
  • Umschließt die checkbox input in label tag, eine wilde Vermutung nach dem Lesen dieser Beitrag (Ergebnis: es verschwindet).
  • Random hand-wavey-rearrangements von divs (Ergebnis: Geist zerkleinert, git checkout änderungen zurücknehmen).

Ich bin aus Ideen heraus.

InformationsquelleAutor Jason C | 2016-12-10

  1. 12

    Können Sie eine Klasse hinzufügen, um die Einstellung? Versuchen Sie dies:

    <input class="form-control move-left" type="checkbox" id="field3">

.move-left {
    width: auto;
    box-shadow: none;
  }

    Demo: http://www.bootply.com/At8YVfnm5F

    Aktualisiert als pro-Ströme Kommentar.

    Ausgezeichnet. Ich glaube, ich würde haben entdeckt, dass die Breite der übeltäter war, wenn ich sah Sie näher im Bereich "Informationen". Dies wird auch befreien Sie von der Schatten-Grenze, die wirklich stört mich, obwohl ich nicht danach Fragen.
    Auch (Dank gyre), hinzufügen der checkbox-inline Klasse auf der Oberseite der dies behebt die vertikale Ausrichtung.
    toll, bin froh, dass es geholfen hat. War nicht bewusst checkbox-inline, das ist praktisch
    Eine andere Sache: width: auto wäre eine flexiblere Wahl.

    InformationsquelleAutor sol

  2. 4

    Versuchen Sie, die Klasse des umschließenden div Ihrem checkbox aus col-sm-8 zu col-sm-1 und dann noch ein Klasse checkbox-inline auf Ihre input-element.

    Demo: http://www.bootply.com/kjF1gVtWDC

    <div class="col-sm-1">
  <!-- HERE IS THE CHECKBOX: -->
  <input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>
    Oh ich sehe. Ich denke mal das funktioniert so lange, 1/12th der container-Breite kleiner ist als die form Zeilenhöhe, was wahr ist in meiner 600px Fall. Ich ein bisschen bedauern hinzufügen max-width zu meinem Beispiel, aber es ist zu spät, heh. Ich Frage mich, ob es eine Lösung für die breiteren Formen? Auch die vertikale Ausrichtung ist ein bisschen off (es ist ein paar Pixel zu niedrig), aber ich glaube, ich kann damit Leben, dass für jetzt.
    Die vertikale Ausrichtung deaktiviert ist verursacht durch margin: 4px 0 0; - in zu spielen, um mit Ihrer Geige, ändern könnte, seine css-Eigenschaften in der developer console. und die Zeilenhöhe.
    Cool, Einstellung margin:0 behebt, dass. Dieser bekommt den job getan. Ich bin gonna geben Sie diese ein paar Minuten noch, um zu sehen, ob jemand irgendwelche Vorschläge für Fälle mit größeren übergeordneten Containern, bevor ich Sie akzeptiere.
    Ich bin ein "bootstrapper" mich. Ich will nicht nehmen Sie Weg von dieser Antwort, aber wenn ich helfen kann, ich werde glücklich sein zu helfen. Ich bin nicht auf mein Arbeits-Rechner jetzt.
    Beachten Sie, dass Sie anwenden können, eine Klasse von checkbox-inline an den Eingang, um den gleichen Effekt erzielen.

    InformationsquelleAutor gyre

  3. 4

    Können Sie ändern Sie die Breite initial-oder auto für den input id LiveOnBootplay

       input#field3 {
     width: auto;
    }

    InformationsquelleAutor Mostafa Baezid

Schreibe einen Kommentar