caixa de entrada de fundação? Tamanho
Usando uma coluna de grade para definir o tamanho da caixa de entrada, tais como .large-6 , .medium-6 , e assim por diante.
Mais sistema de rede de conhecimento, você pode clicar sobre o sistema de grade tutorial.
Exemplos
<Div class = "linha">
<Div class = "large-10 médias-7 colunas">
<Label> grande-10 médio 7 (100% em pequena)
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "linha">
<Div class = "small-5 colunas">
<Label> pequeno-5
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "linha">
<div class = "média-3 colunas">
<Label> meio-3 (100 % em pequena)
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
tente »
Igual ao tamanho da coluna
O que se segue ilustra exemplos de colunas de tamanho igual:
Exemplos
<Div class = "linha">
<div class = "média-4 colunas">
<Label> meio-4 (100 % em pequena, empilhados)
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
<div class = "média-4 colunas">
<Label> meio-4 (100 % em pequena, empilhados)
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
<div class = "média-4 colunas">
<Label> meio-4 (100 % em pequena, empilhados)
<Input type = "text" espaço reservado = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
tente »
tags em linha
Se você quiser que o seu conteúdo do rótulo exibido no lado esquerdo (não o topo), você pode marcar o elemento da etiqueta na caixa à entrada esquerda da colunas diferentes e usar .inline classe para definir o centro vertical:
Exemplos
<Div class = "linha">
<Div class = "pequeno-8 ">
<Div class = "linha">
<Div class = "small-3 colunas">
<Label for = "nome" class = "right inline"> Nome </ label>
</ Div>
<Div class = "pequenos-9 colunas">
<Input type = "text" id = "nome" espaço reservado = "Nome ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
tente »
Dianteiro e traseiro etiqueta
Você pode <div class="row collapse"> > adicionar elemento de guia dianteiro e traseiro: < element class="postfix"> ou < element class="prefix"> . É possível usar o sistema de grade para definir o tamanho das etiquetas frontal e traseira:
Exemplos
<Div class = "linha">
<Div class = "large-6 colunas">
<Div class = "linha colapso prefixo -radius">
<Div class = "small-3 colunas">
<Span class = "prefixo"> Prefixo </ span>
</ Div>
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 colunas">
<Div class = "linha colapso postfix -radius">
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
<Div class = "small-3 colunas">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
tente »
Frente e botão de guia traseira
Você pode usar <a> adicionar elementos .button classe para definir os botões dianteiros e traseiros:
Frente e traseira botões redondos etiqueta
Exemplos
<Div class = "linha">
<Div class = "large-6 colunas">
<Div class = "linha colapso prefixo -radius">
<Div class = "small-3 colunas">
<Span class = "prefixo"> Prefixo </ span>
</ Div>
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 colunas">
<Div class = "linha colapso postfix -radius">
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
<Div class = "small-3 colunas">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "linha">
<Div class = "large-6 colunas">
<Div class = "linha colapso prefixo -round">
<Div class = "small-3 colunas">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 colunas">
<Div class = "linha colapso postfix -round">
<Div class = "pequenos-9 colunas">
<Input type = "text" espaço reservado = "Valor">
</ Div>
<Div class = "small-3 colunas">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
tente »