有人可以检查此代码,我真的不知道我在做什么错,
我正在使用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>
如果您希望在字段之间保持干净的间距,则只需form-control
从每个div中删除该类,因为它们是不必要的,然后为堆叠的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>
以及一些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;
}
您应该删除它,因为它会导致上面的问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句