bootstrap 3.2
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.
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
Curtidas 0
Melhor post
Randrade
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.:
Lembrando que você precisa modificar o tamanho de cada div( col-md-????).
Qualquer coisa de uma olhada na documentação, neste link.
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.
GOSTEI 2
Mais Respostas
Marcelo Pastore
15/12/2014
Tudo que vc se refere é todos os campos?
GOSTEI 0
Rob2014
15/12/2014
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
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
GOSTEI 0
Rob2014
15/12/2014
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,
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,
GOSTEI 0
Rob2014
15/12/2014
Deu certo. Consegui!
Muito obrigado!
Muito obrigado!
GOSTEI 0
Marcelo Pastore
15/12/2014
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,
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!!!
GOSTEI 0
Marcelo Pastore
15/12/2014
Deu certo. Consegui!
Muito obrigado!
Muito obrigado!
Pode postar o código com a solução?
GOSTEI 0
Marcelo Pastore
15/12/2014
Deu certo. Consegui!
Muito obrigado!
Muito obrigado!
Pode postar o código com a solução?
GOSTEI 0
Rob2014
15/12/2014
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>
<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>
GOSTEI 0
Marcio Araujo
15/12/2014
Valeu Rob!
GOSTEI 0
Rogerio Santos
15/12/2014
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
Assim que postei no forum conseguir resolver para que ficasse uma formatação adequada:
<select class="input-sm" name="UF">
Abs
Rogério
GOSTEI 0