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就足夠了。