Eu queria que os campos de RG, Orgão Expedidor e UF juntos somassem o cumprimento do campo CPF Acima.
Foi utilizado a class
row
do bootstrap e configurações das colunas col-md-*
e col-sm-*
para funcionar:
Código exemplo:
Visualmente na resposta não tem conferir, mas, em um região maior ele se adequa da maneira que espera.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="form-group col-md-12 col-sm-12">
<label for="exampleInputEmail1">CPF</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="CPF">
</div>
</div>
<div class="row">
<div class="form-group col-md-8 col-sm-8">
<label for="exampleInputEmail1">RG</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="RG">
</div>
<div class="form-group col-md-2 col-sm-2">
<label for="exampleInputEmail1">Orgão Expedidor</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Orgão Expedidor">
</div>
<div class="form-group col-md-2 col-sm-2">
<label for="exampleInputEmail1">UF</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="UF">
</div>
</div>
Um exemplo no JsFiddle
Observação: No link da documentação existe outros paramentos se for utilizar em celulares e dispositivos menores.
Referencias:
-
Eu gostaria que os 3 campos estivessem na mesma linha RG, Orgão Expedidor e UF – Valter Negreiros 26/12/16 às 14:39
-
-
Eu peguei o seu código e modifiquei, então eu tive o resultado esperado. – Valter Negreiros 26/12/16 às 14:47
-
1Em vez de 8-2-2, eu utilizei 4-4-4 e consegui colocar os 3 campos na mesma linha... MUITO OBRIGADO. – Valter Negreiros 26/12/16 às 14:48
No site oficial do Bootstrap existe um pequeno tutorial para isso: "Controles de formulários individuais recebem automaticamente algum estilo global. Todos os elementos textuais , , e com .form-control são ajustados para width: 100%; por padrão. Envolva labels e controles em .form-group para melhor espaçamento."
<form>
<div class="form-group">
<label for="exampleInputEmail1">Endereço de e-mail</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Lembrando que essas classes só irão funcionar se estiver linkando ao css do Bootstrap
-
Eu gostaria que os 3 campos estivessem na mesma linha RG, Orgão Expedidor e UF – Valter Negreiros 26/12/16 às 14:40
Fiz o seguinte: coloquei <div class="form-group col-md-4 col-sm-4">
, nos 3 campos.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="row">
<div class="form-group col-md-4 col-sm-4">
<label for="exampleInputEmail1">RG</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="RG">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="exampleInputEmail1">Orgão Expedidor</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Orgão Expedidor">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="exampleInputEmail1">UF</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="UF">
</div>
</div>
</div>