Inline-Eingabe von Formularsteuerelementen mit Beschriftung

Question

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:&nbsp;</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:&nbsp;</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:&nbsp;</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>

bootstrap-4

4

Stuart 18 Apr. 2018 im 04:05

Answer 1

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:&nbsp;</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:&nbsp;</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:&nbsp;</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>

5

Athul 18 Apr. 2018 im 07:24

Answer 2

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.

1

Matt 16 Okt. 2019 im 10:18

Answer 3

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;
}

0

Ali Jamal 24 Sept. 2019 im 16:33

Answer 4

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">

-2

Shiblu 18 Apr. 2018 im 07:29

Inline-Eingabe von Formularsteuerelementen mit Beschriftung

4 Antworten

Neue Fragen

bootstrap-4