Bootstrap 3表单控件未堆叠

保罗·何塞·奥利维拉·罗莎

有人可以检查此代码,我真的不知道我在做什么错,

我正在使用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;
}

here地在这里

在您的网站上, 定义了以下内容template.cssbootstrap.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整Bootstrap 3表单控件的大小

来自分类Dev

Bootstrap列未堆叠

来自分类Dev

Bootstrap列未堆叠

来自分类Dev

对齐表单控件的Bootstrap

来自分类Dev

对齐表单控件的Bootstrap

来自分类Dev

Bootstrap 3 Navbar元素堆叠-导航栏品牌未缩放

来自分类Dev

Bootstrap 3表单未正确对齐

来自分类Dev

流星Bootstrap 3表单未提交

来自分类Dev

如何使用Bootstrap 3为表单控件创建连接的按钮?

来自分类Dev

BootStrap 3控件对齐

来自分类Dev

Bootstrap 3表单示例

来自分类Dev

在Bootstrap Popover内部显示表单控件输入

来自分类Dev

使用bootstrap 3防止div垂直堆叠

来自分类Dev

Bootstrap 3:具有控件标签的单选按钮在表单水平上是否起作用?

来自分类Dev

Bootstrap 3:具有控件标签的单选按钮是否在水平表单上起作用?

来自分类Dev

django-crispy-forms中的Bootstrap3内联表单未显示表单错误

来自分类Dev

Bootstrap列未堆叠在小屏幕/移动屏幕上

来自分类Dev

Bootstrap表单元素未级别

来自分类Dev

Bootstrap表单未提交为POST

来自分类Dev

Bootstrap / CSS输入表单未居中

来自分类Dev

Bootstrap表单标签未正确显示

来自分类Dev

Bootstrap 表单输入框未对齐

来自分类Dev

Bootstrap div不堆叠

来自分类Dev

Bootstrap:堆叠 div 行

来自分类Dev

Bootstrap Columns 垂直堆叠

来自分类Dev

Bootstrap 3行未排队

来自分类Dev

将表单控件与 bootstrap 和 Syncfusion 小部件对齐

来自分类Dev

如何找出Bootstrap 3列是否已堆叠

来自分类Dev

如何在Bootstrap 3中间隔垂直堆叠的按钮