Diminuir width do input com bootstrap, mas sem alterar o agrupamento
02/09/2018
0
Fala pessoal, beleza? Eu estou fazendo uma página e dentro de uma opção do menu do cabeçalho eu fiz uma modal window segue no código abaixo :
<form class="modal fade" id="janela">
<div class="modal-dialog">
<div class="modal-content">
<!-- Cabeçalho -->
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 class="modal-title" align="left">Efetuar Cadastro</h3>
</div>
<div class="form-group">
<h4>Nome</h4>
<input type="text" class="form-control " id="nome" placeholder="Digite Seu Nome Completo">
</div>
<div class="form-group">
<h4>Email</h4>
<input type="email" class="form-control" id="email" placeholder="Digite Seu email">
</div>
<div class="form-group ">
<h4>Senha</h4>
<input type="password" class="form-control" id="senha" placeholder="Digite sua senha">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary ">
Cadastrar
</button>
</div>
</div>
</div>
</form>
A minha única dúvida é a seguinte, a modal abre com uma heigh e width padrão, até aí tudo bem, mas os inputs ocupam esse espaço todo, eu queria é alterar o width dos inputs, tentei colocar pelo css width 50% ou alguns valores em px, mas nada aplica, tentei usar o sistema de grid colocando col-xs-6 ou qualquer coisa menor que 12 também para testar, até funciona, mas dai meus botões saem do lugar quando eu mexo no grid, e na verdade o tamanho ideal do meu input seria col-xs-6 mesmo, em cada um deles, como eu faço pra colocar o input do tamanho 6grid e não ficar um do lado do outro e nem mexer na posição dos meus botões ?
<form class="modal fade" id="janela">
<div class="modal-dialog">
<div class="modal-content">
<!-- Cabeçalho -->
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 class="modal-title" align="left">Efetuar Cadastro</h3>
</div>
<div class="form-group">
<h4>Nome</h4>
<input type="text" class="form-control " id="nome" placeholder="Digite Seu Nome Completo">
</div>
<div class="form-group">
<h4>Email</h4>
<input type="email" class="form-control" id="email" placeholder="Digite Seu email">
</div>
<div class="form-group ">
<h4>Senha</h4>
<input type="password" class="form-control" id="senha" placeholder="Digite sua senha">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary ">
Cadastrar
</button>
</div>
</div>
</div>
</form>
A minha única dúvida é a seguinte, a modal abre com uma heigh e width padrão, até aí tudo bem, mas os inputs ocupam esse espaço todo, eu queria é alterar o width dos inputs, tentei colocar pelo css width 50% ou alguns valores em px, mas nada aplica, tentei usar o sistema de grid colocando col-xs-6 ou qualquer coisa menor que 12 também para testar, até funciona, mas dai meus botões saem do lugar quando eu mexo no grid, e na verdade o tamanho ideal do meu input seria col-xs-6 mesmo, em cada um deles, como eu faço pra colocar o input do tamanho 6grid e não ficar um do lado do outro e nem mexer na posição dos meus botões ?
Pedro Verani
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)