Wie erhalten Sie mit Bootstrap 4 eine Eingabe zur Formularsteuerung, die mit der Beschriftung übereinstimmt? Ich konnte keine Beispiele für das Inline-Erstellen von Formularsteuerelementen finden, während reaktionsfähige Zeilen und Spalten pro Formulargruppe beibehalten wurden.
Das Problem, das ich habe, ist, dass die Beschriftungen einen ganzen Block einnehmen. Ich möchte kompaktere Steuerelemente, bei denen sich die Beschriftung auf demselben Block wie das Steuerelement befindet, während sich jede Gruppe von Beschriftungen und Eingaben in einem reaktionsfähigen Raster befindet.
<form action="#" autocomplete="nope">
<div class="form-row">
<div class="form-group col-md-4">
<label for="companyName" class="mr-2 col-form-label-sm">Name: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
</div>
<div class="form-group col-md-4">
<label for="version" class="mr-2 col-form-label-sm">Version: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
</div>
<div class="form-group col-md-4">
<label for="notes" class="mr-2 col-form-label-sm">Notes: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-primary btn-sm">Add</button>
<button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
</div>
</div>
</form>
4 Antworten
Sie können den folgenden Code hinzufügen, um dies zu erreichen.
.form-group.col-md-4 {
display: flex;
align-items: center;
}
.form-group.col-md-4 {
display: flex;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form action="#" autocomplete="nope">
<div class="form-row">
<div class="form-group col-md-4">
<label for="companyName" class="mr-2 col-form-label-sm">Name: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
</div>
<div class="form-group col-md-4">
<label for="version" class="mr-2 col-form-label-sm">Version: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
</div>
<div class="form-group col-md-4">
<label for="notes" class="mr-2 col-form-label-sm">Notes: </label>
<input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-primary btn-sm">Add</button>
<button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
</div>
</div>
</form>
</div>
Ich hatte das gleiche Problem. @ Athuls Antwort ist gut, aber ich wollte, dass alles gut ausgerichtet ist und immer ein Label + Kontrolle in jeder Zeile hat. Also habe ich mir Folgendes ausgedacht:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row">
<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
<label for="Name" style="padding-top:0.375rem">Name</label>
</div>
<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
<input type="text" id="Name" name="Name" class="form-control-plaintext" value="Some Name Here" readonly />
</div>
</div>
<div class="form-row">
<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
<label for="Seconds" style="padding-top:0.375rem">Seconds</label>
</div>
<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
<input type="number" id="Seconds" name="Seconds" class="form-control" />
</div>
Das funktioniert gut für mich.
HINWEIS : Ich brauchte dies nur für ein Formular, nicht überall ... andernfalls würde ich eine benutzerdefinierte CSS-Klasse zum Auffüllen empfehlen, die ich den Beschriftungen hinzugefügt habe.
Verwenden Sie input-group
, input-group-prepend
und fügen Sie Ihre Bezeichnung in den Bereich input-group-text
ein
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
Und in Ihrer CSS-Datei
.input-group > .input-group-prepend > .input-group-text {
background-color: #fff;
border: none;
}
.form-group > .input-group > .form-control {
border-radius: .25rem;
}
Wenn Sie die Beschriftungen an der Texteingabe ausrichten möchten, können Sie die Form-Inline-Klasse für Ihren Code verwenden.
Nur ändern
<div class="form-row">
Zu
<div class="form-inline">
Neue Fragen
bootstrap-4
Bootstrap 4 ist die vierte Hauptversion der beliebten Front-End-Komponentenbibliothek. Das Bootstrap-Framework hilft bei der Erstellung von reaktionsschnellen Websites und Web-Apps, die zuerst auf Mobilgeräten verfügbar sind.