bootstrap 3.2

15/12/2014

0

Olá,

Estou aprendendo a trabalhar com bootstrap.
Fiz minha primeira tela de formulário e estou com dificuldades de formatar o tamanho do campo.

Veja o código

<div class="form-group">
<label for="contato" class="col-md-2 col-sm-2 col-lg-2 col-xs-2 control-label">Contato</label>
<div class="col-md-10 col-sm-10 col-lg-10 col-xs-10">
<input type="text"name="contato" class="form-control" id="contato" placeholder="Contato" value="<?php echo $d1["contato"];?>" maxlength="255">
</div>
</div>
<div class="form-group">
<label for="ddd1" class="col-md-2 col-sm-2 col-lg-2 col-xs-2 control-label">Telefone</label>
<div class="col-md-10 col-sm-10 col-lg-10 col-xs-10">
<input type="text" size="2" name="ddd1" class="form-control" id="ddd1" placeholder="ddd" value="<?php echo $d1["ddd1"];?>" maxlength="2">
<input type="text" size="10" name="telefone1" class="form-control" id="telefone1" placeholder="Telefone" value="<?php echo $d1["telefone1"];?>" maxlength="10">
<select class="form-control" id="operadora1" name="operadora1">
<option value="1"<?php if("1" == $d1["operadora1"]){ echo " selected";}?>>CLARO</option>
<option value="2"<?php if("2" == $d1["operadora1"]){ echo " selected";}?>>VIVO</option>
<option value="3"<?php if("3" == $d1["operadora1"]){ echo " selected";}?>>TIM</option>
<option value="4"<?php if("4" == $d1["operadora1"]){ echo " selected";}?>>NEXTEL</option>
<option value="5"<?php if("5" == $d1["operadora1"]){ echo " selected";}?>>NET</option>
</select>
</div>
</div>

No caso eu gostaria que os campos ddd1, telefone1 e operadora1 ficassem na mesma linha.

Como eu devo proceder?

Desde já agradeço o apoio.
Rob2014

Rob2014

Responder

Post mais votado

15/12/2014

Você precisa colocar tudo dentro de uma <div> de delimitar os campos que você quer colocar na mesma linha por outra <div>.

Ex.:
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>



Lembrando que você precisa modificar o tamanho de cada div( col-md-????).

Qualquer coisa de uma olhada na documentação, neste link.

Randrade

Randrade
Responder

Mais Posts

15/12/2014

Marcelo Pastore

Tudo que vc se refere é todos os campos?
Responder

15/12/2014

Rob2014

Olá RAndrade,

Obrigado pela resposta.

Eu fiz o que você sugeriu porém o campo perdeu a formatação.
Quando uso class="form-control" na tag input type text o campo fica grande. Se eu coloco apenas a expressão col-md-4 o campo perde a formatação. O campo fica quadrado sem bordas arredondadas.

Sabe me dizer o que ocorre?

Meu bootstrap 3.2.0
Responder

15/12/2014

Rob2014

Olá Marcelo,

No caso não são todos os campos. Existe campo por exemplo com nome onde preciso de um espaço maior.
No exemplo acima eu preciso agrupar os campos.

Grato,
Responder

15/12/2014

Rob2014

Deu certo. Consegui!

Muito obrigado!
Responder

15/12/2014

Marcelo Pastore

Olá Marcelo,

No caso não são todos os campos. Existe campo por exemplo com nome onde preciso de um espaço maior.
No exemplo acima eu preciso agrupar os campos.

Grato,


Entendi!!!
Responder

15/12/2014

Marcelo Pastore

Deu certo. Consegui!

Muito obrigado!


Pode postar o código com a solução?
Responder

15/12/2014

Marcelo Pastore

Deu certo. Consegui!

Muito obrigado!


Pode postar o código com a solução?
Responder

15/12/2014

Rob2014

Posso sim

<div class="form-group">
<label for="ddd1" class="col-md-2 col-sm-2 col-lg-2 col-xs-2 control-label">Telefone</label>
<div class="col-md-10 col-sm-10 col-lg-10 col-xs-10">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">
<input type="text" size="2" name="ddd1" class="form-control" id="ddd1" placeholder="ddd" value="<?php echo $d1["ddd1"];?>" maxlength="2">
</div>
<div class="col-md-4 col-sm-4 col-lg-4 col-xs-4">
<input type="text" size="10" name="telefone1" class="form-control" id="telefone1" placeholder="Telefone" value="<?php echo $d1["telefone1"];?>" maxlength="10">
</div>
<div class="col-md-5 col-sm-5 col-lg-5 col-xs-5">
<select class="form-control" id="operadora1" name="operadora1">
<option value="1"<?php if("1" == $d1["operadora1"]){ echo " selected";}?>>CLARO</option>
<option value="2"<?php if("2" == $d1["operadora1"]){ echo " selected";}?>>VIVO</option>
<option value="3"<?php if("3" == $d1["operadora1"]){ echo " selected";}?>>TIM</option>
<option value="4"<?php if("4" == $d1["operadora1"]){ echo " selected";}?>>NEXTEL</option>
<option value="5"<?php if("5" == $d1["operadora1"]){ echo " selected";}?>>NET</option>
</select>
</div>
</div>
</div>
</div>
Responder

15/12/2014

Marcio Araujo

Valeu Rob!
Responder

11/12/2017

Rogerio Santos

Bom dia...
Assim que postei no forum conseguir resolver para que ficasse uma formatação adequada:
<select class="input-sm" name="UF">

Abs

Rogério
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar