Bootstrap 3表单控件不堆叠

Question

有人可以检查这个代码，我真的不知道我做错了什么，

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

Answer 1

如果你想在字段之间保持干净的间距，我只是从每个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>

和一些CSS在每个堆叠层之间添加间距：

fieldset div {
    margin-bottom: 10px;
}

Bootply在这里 。

在您的站点上，您在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; 
}

你应该删除它，因为它会导致你上面的问题。

Answer 2

如果你想这样做TheBootstrapWayTM这里是解决方案：

您将每个单独的表单组包装在col-*-6类中。 你所说的Bootstrap不仅“堆叠这些项目”，而且“将这些项目作为一行排列并以内联方式显示”。 你应该选择其中一个。

看看我在这个jsfiddle中做了什么： http ： //jsfiddle.net/kmblackwood/52VtD/7392/

在这里你可以看到我已经将你想要堆叠的前四个项目包装在他们自己的列中的一列中 ：

<div class="col-xs-6">
  <div class="form-control">...</div>
  <div class="form-control">...</div>

... 等等。

如果您将两列彼此相邻放置，它们将显示堆叠，并且每个列都在其自己的列中。 哦，而且，你不需要把.col-lg-* col-super-large-* ..etc. 如果您在所有屏幕尺寸上使用相同的列宽。 因为Bootstrap是移动优先的，所以col-xs-6就足够了。