有人可以检查这段代码吗,我真的不知道我做错了什么,
我正在使用 T3 Blank 和 Twitter Bootstrap 3 创建此表单
出于某种原因,字段没有与 form-grouo 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="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>
最佳答案
如果您希望字段之间有干净的间距,我会从每个 div 中删除 form-control
类,因为它们不是必需的,然后为堆叠添加一些边距分区:
<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>
和一些 CSS 来增加每个堆叠层之间的间距:
fieldset div {
margin-bottom: 10px;
}
在您的网站上,您在 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;
}
您应该删除它,因为它会导致您遇到上述问题。
关于javascript - Bootstrap 3 表单控件不堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25211583/