Formular inline innerhalb eines Formulars horizontal in Twitter Bootstrap?

199

Was ist der beste Weg, um ein Formular zu entwerfen, das so aussieht (siehe Link unten), in Twitter-Bootstrap ohne hausgemachte Klassen?

Ist es möglich, eine innere Form-Inline innerhalb einer Form-Horizontalen wie im folgenden Beispiel festzulegen:

Screenshot des UI-Ziels

html forms twitter-bootstrap Frntz
quelle

Antworten:

316

Verschachteln Sie keine <form>Tags, das wird nicht funktionieren. Verwenden Sie einfach Bootstrap-Klassen.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

Sie können dieses Verhalten auf viele Arten erreichen, das ist nur ein Beispiel. Testen Sie es auf diesem Bootply

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Beachten Sie, dass ich .form-inlinedas richtige Styling in a verwende .controls.
Sie können es auf dieser jsfiddle testen

Albertedevigo
quelle
3
Sie können auch die Formularklassen für Divs hinzufügen. In meinem Fall habe ich die vertikale Formularklasse für ein span6-Div und eine horizontale Formularklasse für ein span12-Div verwendet
Iftah
3
Dies funktioniert für bootstrap2. Für Bootstrap 3 besuchen Sie: stackoverflow.com/questions/18429121/…
Tomislav Muic
1
Wenn in Bootstrap 3 eine Lücke unter der Eingabe vorhanden ist, entfernen Sie "Formulargruppe". Es fügt eine 15px Lücke am unteren Rand jedes Divs hinzu, mit dem Sie es verwenden.
Darkzangel
Sie müssen die Formulargruppe nicht mit der Zeile im Beispiel "Schlüssel + Wert" mischen. @ rap-2-h: Sie können den Beispielcode kopieren, einfügen und auf Ausführen klicken.
Sebastian
Dies funktioniert, aber ich konnte es in der aktuellen Version von Bootstrap 3 vereinfachen ... Es scheint der Schlüssel zu dieser Lösung zu sein, nur Eingabesteuerelemente in ein div zu setzen, sonst funktioniert das col-xx-Rasterlayout nicht. Es war nicht erforderlich, die Formulargruppe zu verschachteln, das übergeordnete col-xx- # kann dasselbe div verwenden, und die Klasse "row" ist nicht erforderlich, da das übergeordnete Formular bereits ein Formularhorizontal ist (100%).
Tony Wall
92

Das obige Beispiel für Bootstrap 3 funktioniert, ist jedoch zu kompliziert, anstatt die Formulargruppe zu verwenden, verwenden Sie form-inline für die Felder, die Sie inline verwenden möchten.

Z.B:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
Ryan Knell
quelle
Es funktioniert möglicherweise nicht für Sie, da die Formularsteuerungsklasse "display: block" festlegt. Wenn Sie es auf "display: inline-block" überschreiben, sollte es funktionieren.
Cédric Guillemette
1
Das funktioniert nicht. Versuchen Sie zu tun, was die Frage stellt. Dies ist mit form-inline nicht möglich.
Sebastian
Das einzige Problem dabei ist, dass der Unterbereich nicht auf die volle Breite erweitert wird und jeder Versuch, die Rastergröße zu verwenden, im Verhältnis zur erforderlichen Mindestinhaltsbreite gequetscht wird. Die andere Lösung ist besser, nur ohne so viele Divs (siehe meinen Kommentar dort).
Tony Wall
3
Sie müssen alle Formulargruppen in Form-Inline-Klasse
einschließen
jsfiddle.net/9637fywb Dies scheint nicht wie gewünscht zu funktionieren - unter Verwendung des aktuellsten Bootstrap-CDN (3.3.5). Dieses Beispiel berücksichtigt auch nicht zwei Beschriftungen innerhalb des Abschnitts "Inline". Vielleicht fehlt der Geige eine Art Wrapper, aber es scheint, dass dies in der Antwort enthalten sein sollte, wenn ja.
Emragins
14

Dies verwendet Twitter Bootstrap 3.x mit einer CSS-Klasse, damit Beschriftungen über den Eingaben sitzen. Hier ist ein Geigenlink. Stellen Sie sicher, dass Sie das Ergebnisfenster so weit erweitern, dass der Effekt sichtbar wird.

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

CSS:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Batteriesäure
quelle
2

Seit Bootstrap 4 verwenden Sie div class = "form-row" in Kombination mit div class = "form-group col-X". X ist die Breite, die Sie benötigen. Sie erhalten schöne Inline-Spalten. Siehe Geige .

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>
Henry
quelle
1

Ich weiß, dass dies eine alte Antwort ist, aber hier ist, was ich normalerweise mache:

CSS:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

Wickeln Sie dann die Felder, die eingefügt werden sollen, in ein div und fügen Sie der Eingabe .form-control-inline hinzu. Beispiel:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
Jesus Gomez
quelle
1

Um es einfach zu machen, fügen Sie einfach ein class="form-inline"vor der Eingabe hinzu.

Beispiel: 

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>
Neugierde
quelle