Wie steuere ich die Eingabebreite in Bootstrap 3-Formularen?

Eingabebreitenverwaltung in Bootstrap 3

Bootstrap 3 bietet eine begrenzte Auswahl an Optionen zur Steuerung der Breite von Formulareingaben. Wie aus der ursprünglichen Frage hervorgeht, führt die Verwendung von .col-lg-x nicht zum gewünschten Ergebnis. Dies liegt daran, dass .col-lg-x nur auf Container-Divs angewendet werden kann, was zu Layoutproblemen führt.

Alternativer Ansatz

Um die gewünschte Funktionalität zu erreichen, sollten Sie das Umschließen in Betracht ziehen jede Eingabegruppe in einer eigenen Zeile, anstatt das gesamte Formular in einer einzigen Zeile einzuschließen. Zum Beispiel:

<code class="html"><form role="form">
    <div class="row">
        <div class="form-group col-lg-1">
            <label for="code">Name</label>
            <input type="text" class="form-control" />
        </div>
    </div>

    <div class="row">
        <div class="form-group col-lg-1">
            <label for="code">Email</label>
            <input type="text" class="form-control input-normal" />
        </div>
    </div>

    <div class="row">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form></code>

Bei diesem Ansatz wird jede Eingabegruppe in eine separate .row eingeschlossen, um sicherzustellen, dass die Eingabebreiten unabhängig von der Bildschirmgröße konsistent bleiben. Darüber hinaus können Sie durch Hinzufügen von .col-lg-5 zum Eingabecontainer die Eingabebreite auch in kleineren Bildschirmen steuern.

Einschränkungen

Das ist wichtig zu beachten dass die ursprüngliche Frage auf eine Lösung mit integrierter BS-Funktionalität abzielte, ohne auf Raster zurückzugreifen. Wie die Lösung zeigt, erfordern jedoch auch integrierte Optionen die Nutzung des Netzes, um das gewünschte Verhalten zu erreichen.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Eingabebreite in Bootstrap 3-Formularen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!