[英]Bootstrap 3 form-control not stacking
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 我正在使用T3 Blank和Twitter Bootstrap 3来创建此表单
the fields are not stacking with the form-grouo div width for some reason, heres the print: 由于某种原因,字段没有与form-grouo div宽度堆叠,继承人打印:
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>
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中删除
form-control
类,因为它们不是必需的,然后为堆叠的div添加一些边距:
<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: 和一些CSS在每个堆叠层之间添加间距:
fieldset div {
margin-bottom: 10px;
}
On your site, you have the following defined in both template.css
and bootstrap.css
: 在您的站点上,您在
template.css
和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. 你应该删除它,因为它会导致你上面的问题。
If you want to do this TheBootstrapWayTM here's the solution: 如果你想这样做TheBootstrapWayTM这里是解决方案:
You're wrapping each individual form group in a col-*-6
class. 您将每个单独的表单组包装在
col-*-6
类中。 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." 你所说的Bootstrap不仅“堆叠这些项目”,而且“将这些项目作为一行排列并以内联方式显示”。 You should pick one or the other.
你应该选择其中一个。
Look what I've done in this jsfiddle: http://jsfiddle.net/kmblackwood/52VtD/7392/ 看看我在这个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.
哦,而且,你不需要把
.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. 因为Bootstrap是移动优先的,所以
col-xs-6
就足够了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.