Foundation Eingabefeld? Größe
eine Rasterspalte Mit der Größe des Eingabefeldes zu setzen, wie .large-6 , .medium-6 , und so weiter.
Mehr Wissen Grid - System, können Sie auf die Schaltfläche Grid - System - Tutorial.
Beispiele
<Div class = "Zeile">
<Div class = "large-10 Medium-7 Spalten">
<Label> Groß 10 mittel- 7 (100% auf kleinen)
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "small-5 Spalten">
<Label> small-5
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "Medium-3 Spalten">
<Label> Medium-3 (100 % auf kleinen)
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
Versuchen »
Gleich der Größe der Spalte
Die folgende Abbildung zeigt Beispiele von Spalten mit gleicher Größe:
Beispiele
<Div class = "Zeile">
<Div class = "Medium-4 Spalten">
<Label> Medium-4 (100 % auf kleinen, gestapelt)
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
<Div class = "Medium-4 Spalten">
<Label> Medium-4 (100 % auf kleinen, gestapelt)
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
<Div class = "Medium-4 Spalten">
<Label> Medium-4 (100 % auf kleinen, gestapelt)
<Input type = "text" Platzhalter = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
Versuchen »
Inline-Tags
Wenn Sie Ihr Etikett Inhalt auf der linken Seite angezeigt werden sollen (nicht oben), können Sie Element - Label auf der Box auf der linken Eingang von verschiedenen Spalten markieren und verwenden .inline Klasse , um die vertikale Mitte zu setzen:
Beispiele
<Div class = "Zeile">
<Div class = "small-8 ">
<Div class = "Zeile">
<Div class = "small-3 Spalten">
<Label for = "name" class = "inline right"> Name </ label>
</ Div>
<Div class = "small-9 Spalten">
<Input type = "text" id = "name" Platzhalter = "Vorname ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Versuchen »
Vordere und hintere Etikett
Sie können <div class="row collapse"> > hinzufügen vorne und hinten Tab - Element: < element class="postfix"> oder < element class="prefix"> . Sie können die Grid-System verwenden, um die Größe der vorderen und hinteren Etiketten zu setzen:
Beispiele
<Div class = "Zeile">
<Div class = "large-6 Spalten">
<Div class = "Zeile Zusammenbruch Präfix -Radius">
<Div class = "small-3 Spalten">
<Span class = "Präfix"> Präfix </ span>
</ Div>
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 Spalten">
<Div class = "row Zusammenbruch postfix -Radius">
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
<Div class = "small-3 Spalten">
<Span class = "Postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Versuchen »
Vordere und hintere Tab-Taste
Sie können mit <a> Elemente hinzufügen .button Klasse die vorderen und hinteren Tasten eingestellt werden :
Vordere und hintere Etikett runden Tasten
Beispiele
<Div class = "Zeile">
<Div class = "large-6 Spalten">
<Div class = "Zeile Zusammenbruch Präfix -Radius">
<Div class = "small-3 Spalten">
<Span class = "Präfix"> Präfix </ span>
</ Div>
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 Spalten">
<Div class = "row Zusammenbruch postfix -Radius">
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
<Div class = "small-3 Spalten">
<Span class = "Postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "large-6 Spalten">
<Div class = "Zeile Zusammenbruch Präfix -Rundfilter">
<Div class = "small-3 Spalten">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 Spalten">
<Div class = "row Zusammenbruch postfix -Rundfilter">
<Div class = "small-9 Spalten">
<Input type = "text" Platzhalter = "Wert">
</ Div>
<Div class = "small-3 Spalten">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Versuchen »