Reputation: 509
Can someone check this code please, i really dont know what i'm doing wrong,
I'm using T3 Blank and Twitter Bootstrap 3 to create this form
the fields are not stacking with the form-grouo div width for some reason, heres the print:
Any help would be apreciated
and heres the code for the form
<div class="row">
<div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="well sombra-externa">
<div class="fonte-main"><h4>Complete seu cadastro!</h4></div>
<legend></legend>
<form id="completar-cadastro" class="form-horizontal clearfix">
<fieldset>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="fisica"><input name="tipopessoa" value="fisica" id="fisica" type="radio"> Pessoa Física</label>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="juridica"><input name="tipopessoa" value="juridica" id="juridica" type="radio"> Pessoa Jurídica</label>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="nomecliente">Nome *</label><input name="nomecliente" class="form-control" value="" placeholder="Seu nome completo" id="nomecliente" type="text">
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="cpf">CPF *</label><input name="cpf" value="" placeholder="Insira seu CPF" id="cpf" type="text" class="form-control">
</div>
<div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2">
<label for="cpf">DDD *</label><input name="ddd" class="form-control" value="" placeholder="DDD" id="ddd" type="text">
</div>
<div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label for="cpf">Telefone *</label><input class="form-control" name="telefone" value="" placeholder="Insira seu CPF" id="telefone" type="text">
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="cpf">CEP *</label><input name="cep" value="" class="form-control" placeholder="Insira seu CEP" id="cep" type="text">
</div>
</fieldset>
</form>
</div>
</div>
<div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="well sombra-externa">colocar passos</div>
</div>
</div>
Upvotes: 1
Views: 776
Reputation: 16659
If you are looking to have clean spacing between the fields, I would just remove the form-control
class from each of the divs as they are not necessary, and then add some margin to the stacked divs:
<div class="row">
<div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="well sombra-externa">
<div class="fonte-main"><h4>Complete seu cadastro!</h4></div>
<legend></legend>
<form id="completar-cadastro" class="form-horizontal clearfix">
<fieldset>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="fisica"><input name="tipopessoa" value="fisica" id="fisica" type="radio"> Pessoa Física</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="juridica"><input name="tipopessoa" value="juridica" id="juridica" type="radio"> Pessoa Jurídica</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="nomecliente">Nome *</label><input name="nomecliente" class="form-control" value="" placeholder="Seu nome completo" id="nomecliente" type="text">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="cpf">CPF *</label><input name="cpf" value="" placeholder="Insira seu CPF" id="cpf" type="text" class="form-control">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<label for="cpf">DDD *</label><input name="ddd" class="form-control" value="" placeholder="DDD" id="ddd" type="text">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label for="cpf">Telefone *</label><input class="form-control" name="telefone" value="" placeholder="Insira seu CPF" id="telefone" type="text">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<label for="cpf">CEP *</label><input name="cep" value="" class="form-control" placeholder="Insira seu CEP" id="cep" type="text">
</div>
</fieldset>
</form>
</div>
</div>
<div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="well sombra-externa">colocar passos</div>
</div>
</div>
and some CSS to add spacing between each stacked layer:
fieldset div {
margin-bottom: 10px;
}
On your site, you have the following defined in both template.css
and bootstrap.css
:
@media screen and (min-width: 768px)
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .inputbox {
width: auto;
}
You should remove this as it is causing the problems you have above.
Upvotes: 2
Reputation: 1204
If you want to do this TheBootstrapWayTM here's the solution:
You're wrapping each individual form group in a col-*-6
class. What you're telling Bootstrap is not only "stack these items" but also "treat these items as columns in a row and display them inline." You should pick one or the other.
Look what I've done in this jsfiddle: http://jsfiddle.net/kmblackwood/52VtD/7392/
Here you can see I've wrapped the first four items you want to stack in one column in their own column:
<div class="col-xs-6">
<div class="form-control">...</div>
<div class="form-control">...</div>
... and so on.
If you put two columns next to each other, they'll both display stacked, and each within their own column. Oh and also, you don't need to put .col-lg-* col-super-large-* ..etc.
if you are using the same column width across all screen sizes. Because Bootstrap is mobile-first, col-xs-6
will suffice.
Upvotes: 1