Eingabebreiten in Bootstrap 3
In Bootstrap 3 kann die Verwaltung von Eingabebreiten eine Herausforderung sein. Obwohl in der Dokumentation die Verwendung der Klasse .col-lg-x vorgeschlagen wird, weist diese Lösung Einschränkungen auf.
Ursprüngliches Problem:
Die ursprüngliche Frage ergab sich aus der Unfähigkeit, Eingaben festzulegen Breiten mit .col-lg-x ohne Auswirkungen auf das Containerlayout. Diese Klasse konnte nur auf den Container selbst angewendet werden, was zu unerwünschten Layoutproblemen führte.
Lösung:
Eine praktische Lösung besteht darin, jede Eingabegruppe in eine eigene Zeile einzuschließen . Auf diese Weise kann die Klasse .col-lg-x auf die einzelnen Gruppen angewendet werden, um deren Breite zu steuern und gleichzeitig die gesamte Formularstruktur beizubehalten.
Codebeispiel:
<code class="html"><div class="container">
<h1>My Form</h1>
<p>How to make these input fields small and retain the layout.</p>
<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>
</div></code>Hinweis:
Um eine einheitliche Größe über verschiedene Bildschirmgrößen hinweg zu erreichen, kann die Klasse .col-xs-5 verwendet werden für kleinere Bildschirme im Lieferumfang enthalten. Das Entfernen hat keinen Einfluss auf die Gesamtfunktionalität.
Schlussfolgerung:
Durch das Einschließen von Eingabegruppen in einzelne Zeilen und die Verwendung der Klasse .col-lg-x können Entwickler dies effektiv tun Verwalten Sie Eingabebreiten in Bootstrap 3, ohne auf Rastersysteme oder benutzerdefinierte CSS-Klassen zurückgreifen zu müssen.
Das obige ist der detaillierte Inhalt vonWie steuere ich Eingabebreiten in Bootstrap-3-Formularen, ohne das Layout zu beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
