Inline-Formular in horizontalem Formular in Bootstrap 3 verschachtelt

73

Ich möchte ein Formular in Bootstrap 3 wie folgt erstellen:

Meine Site (nicht der obige Link) wird nur von Bootstrap 2.3.2 aktualisiert und das Format ist nicht mehr korrekt.

Ich kann auf getbootstrap.com kein Dokument über diese Art von Formular finden .

Kann mir jemand sagen, wie das geht? Nur 'Benutzername' wäre OK.

Vielen Dank.

PS Es gibt eine ähnliche Frage, aber es wird Bootstrap 2.3.2 verwendet.

html css forms twitter-bootstrap twitter-bootstrap-3 Scottie
quelle
1
Warum wollen Sie ein Formular erstellen , das sieht etwas wie das ?
Gilbert-v

Antworten:

149

Ich habe eine Demo für Sie erstellt.

So sollte Ihre verschachtelte Struktur in Bootstrap 3 sein:

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

Beachten Sie, wie das Ganze form-inlinein dem col-xs-10div verschachtelt ist, das die Steuerung der horizontalen Form enthält. Mit anderen Worten, das Ganze form-inlineist die "Kontrolle" des Geburtstagsetiketts in der horizontalen Hauptform.

Beachten Sie, dass beim Verschachteln des Inline-Formulars in das horizontale Formular ein Problem mit dem linken und rechten Rand auftritt. Um dies zu beheben, fügen Sie dies Ihrem CSS hinzu:

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}
edsioufi
quelle
5
Ich weiß nicht , warum (vielleicht etwas in letzter bootstrap.css gebrochen) , aber in Ihrer Demo Feldern year, monthund daynicht platziert Inline aber jeder auf einer anderen Zeile.
Ruslan Stelmachenko
2
Oh, das liegt an der geringen Bildschirmbreite von jsfiddle. Hinzufügen einer Klasse, col-xs-3um <div class="form-group">das Problem zu lösen.
Ruslan Stelmachenko
3
Warum benutzt du <div class="form-group">das überhaupt form-inline? Ich benutze es nicht und die Ränder funktionieren von selbst ohne benutzerdefiniertes CSS. Vermisse ich etwas
Isaac Betesh
@IsaacBetesh Dies ist eine Anforderung von Bootstrap, um Probleme zu vermeiden, die bei der Verwendung eines input-groupinnerhalb der form-inline(für weitere Informationen siehe meine Antwort auf diese Frage )
edsioufi
1
Diese Struktur scheint keine Kontrolle über verschachtelte Feldbreiten zu bieten?
29.
17

Eine andere Möglichkeit besteht darin, alle gewünschten Felder in einer einzigen Zeile in einer einzigen Zeile zu platzieren form-group.

Siehe Demo hier

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>
Dan
quelle
Hat mir irgendwie geholfen. +1
Abdulla Nilam
Diese Option funktioniert gut, solange Sie Felder in eine Formulargruppe einfügen, die tatsächlich dazu gehört. Stellen Sie sich zusätzliche has_errorKlassen vor, die am selben Knoten wie angewendet werden müssen form-group. Wenn Sie verschiedene Felder und Beschriftungen innerhalb einer Formulargruppe mischen, wird diese Bootstrap-Semantik unterbrochen.
Matthias
7

Dieses Bootply- Beispiel scheint eine viel bessere Option zu sein. Das einzige ist, dass die Beschriftungen etwas zu hoch sind, also habe ich hinzugefügt, padding-top:5pxum sie mit meinen Eingaben zu zentrieren.

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>
dbinott
quelle
4

Damit es in Chrome (und Bootply) funktioniert, musste ich den Code folgendermaßen ändern:

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>
Max Bertoli
quelle
Dies enthält defektes / ungültiges HTML.
Reformiert
@JimmyObonyoAbor Ich bin ein bisschen zu spät zur Party ... Aber du warst es auch, im Jahr 2016 ... Als reformiert wurde, dass das HTML ungültig ist, war es tatsächlich ungültig ... es wurde nicht einmal einen Monat vor deinem Kommentar behoben
Mischa
0

Ich hatte Probleme beim Ausrichten der Beschriftung an den Eingabeelementen, daher habe ich das Beschriftungselement auch innerhalb der Formularinline und der Formulargruppe übertragen ... und es funktioniert.

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>
theCauldronQueen
quelle
0

Eine viel einfachere Lösung ohne alle inneren form-groupElemente

<div class="form-group">
       <label for="birthday" class="col-xs-2 control-label">Birthday</label>
       <div class="col-xs-10">
           <div class="form-inline">
               <input type="text" class="form-control" placeholder="year" style="width:70px;"/>
               <input type="text" class="form-control" placeholder="month" style="width:80px;"/>
               <input type="text" class="form-control" placeholder="day" style="width:100px;"/>                        
           </div>
     </div>
</div>

... und es wird so aussehen,

Geben Sie hier die Bildbeschreibung ein

Prost!

Anjana Silva
quelle