Twitter Bootstrap 3 em linha com etiquetas
Depois de procurar em todo o lado não consegui ver exactamente como posso desenhar uma forma incorporada que tenha o seguinte design: (usando classes bootstrap 3 em vez de personalizações css, quando possível)
Quando o utilizador tem um ecrã largo:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
Quando o utilizador tem um ecrã mais pequeno:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
a ideia é que o desenho inicialmente coloca todos os campos numa linha e, se não se encaixar, os controlos saltariam para a linha seguinte, mas mantendo o campo Etiqueta + juntamente.
também se houver uma forma de que o espaçamento entre cada etiqueta + entrada seja maior do que o espaçamento entre a etiqueta e o seu campo.
e, por último, se houver uma forma de ter mais margem vertical entre o campo do rótulo + quando ele salta para a linha seguinte.
6 answers
Opção #1: colunas fixas
Pode usar uma mistura de estruturacol-xs-12, col-sm-6 e col-lg-3 para obter 1, 2 ou 4 colunas. Dentro do seu form-group, lembre-se de corrigir os tamanhos do rótulo/entrada com col-xs-4 ecol-xs-8 :
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>
AINDA precisas de alguns CSS:
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}
Podes adicionar as entradas que quiseres.
Bootply
Opção #2: colunas de fluidos
Para não se importar com o número de campos por linha, pode usar isto estrutura:
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>
E algumas linhas CSS para fixar margens:
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
Bootply
O mesmo que a opção #1 de @zessx, mas sem anular o CSS. Este também alinha etiquetas à direita para aumentar o espaço entre pares de etiquetas-controle. Classe "mídia" existe para adicionar margem superior sem criar uma classe personalizada, mas em geral é melhor ter uma personalizada.
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
col para se ajustar ao seu layout.
<div style="display:inline-block">
Label:input
</div>
Desta forma, quando eles estão prestes a quebrar, eles quebram em pares, etiquetas+entradas.
Podes tentar abaixo
Trabalhar aqui ... http://www.bootply.com/117807
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
</div>
</div>
A maneira mais simples é colocar tanto o rótulo como a entrada de texto no cols div. Espero que isto poupe tempo a todos os outros:)
<div class="col-md-3 text-right">
<label>City</label>
</div>
<div class="col-md-3 text-right">
<asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>