Question

以下代码是为表单编写的，但from在引导程序中没有正确对齐。虽然我已经将表格分成行但我不明白的是第一列如何没有正确对齐。我尝试了很多东西，但无法理解。 Pl帮我做好了！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
<form >
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Roll number:</label>
<div class="col-sm-2">
<input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2  ">School code:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Year Of Passing:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div></div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">First Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Middle Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Last Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>
</div>


<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Father's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Father's Middle name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>

<div class="form-group ">
<label class="col-sm-2 ">Father's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

</div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Mother's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mother's Middle name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mother's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div>
</div>
</div>

<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Gender:</label>
<div class="col-sm-2"><select class="form-control" >
<option>Male</option>
<option>Female</option>

</select>
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Mobile Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Aadhar Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
</div>


<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Email:</label>
<div class="col-sm-2"><input type="email" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">DOB:</label>

<div class="col-sm-1"><select class="form-control " >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>

</select>
</div>
<div class="col-sm-2"><select class="form-control " >
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>

</select>
</div>

<div class="col-sm-2"><select class="form-control " >
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>    
</select>
</div></div>
</div>

<div class="row">
 <div class="form-group">
<label class="col-sm-2 ">Religion:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>



<div class="form-group">
<label class="col-sm-2 ">Age:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>

<div class="form-group">
<label class="col-sm-2 ">Category:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div></div>

</form>

</body>
</html>

Answer 1

我在使用{% bootstrap_field form.attribute %}模板标记处理django-bootstrap3时遇到过这种情况。

问题在于您使用了太多的表单组标记。您只需要围绕整个表单输入组。删除标签后，删除现在多余的div，我得到以下代码，这些代码与第一列相比没有第二列和后一列的错位：

    <div class="container-fluid">
        <form >
            <div class="form-group">
                <div class="row">
                        <label class="col-sm-2 ">Roll number:</label>
                        <div class="col-sm-2"><input type="text" class="form-control" ></div>
                        <label class="col-sm-2  ">School code:</label>
                        <div class="col-sm-2"><input type="text" class="form-control " ></div>
                        <label class="col-sm-2 ">Year Of Passing:</label>
                        <div class="col-sm-2"><input type="text" class="form-control" ></div>
                </div>
                <div class="row">
                        <label class="col-sm-2 ">First Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control " ></div>
                        <label class="col-sm-2 ">Middle Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control" ></div>
                        <label class="col-sm-2 ">Last Name:</label>
                        <div class="col-sm-2"> <input type="text" class="form-control" ></div>
                </div>
            </div>
        </form>
    </div>

这在我正在使用的网络服务器设置上看起来正确。

我遇到了这个问题，因为我将django-bootstrap {% bootstrap_field form.attribute %}标记分组为行，但默认行为是为每个表单字段创建一个带有form-group标记的div。我使用form_group_class=""例如：

覆盖它

{% bootstrap_field form.jobNum form_group_class="" field_class="col-md-3" label_class="col-md-2 text-right" %}

Answer 2

您使用行类的方式不正确。它应该是 -

row > col-xs-4 > form-group > col-sm-6


<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">Roll number:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">School code:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control ">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-6">Year Of Passing:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</div>

Jsfiddle与形式水平和控制标签。

https://jsfiddle.net/g6ryga19/

Answer 3

根据您的布局，我建议您将form-horizontal添加到<form>并将control-label添加到所有标签中。另外，我会将您的表单重新组织成3个单独的列，如下所示：

<form class="form form-horizontal">

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">Roll number:</label>
        <div class="col-sm-9"><input type="text" class="form-control" ></div>
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">School code:</label>
        <div class="col-sm-9"><input type="text" class="form-control " ></div>
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
        <label class="col-sm-3 control-label">Year Of Passing:</label>
        <div class="col-sm-9"><input type="text" class="form-control" ></div>
    </div>
</div>

</form>

注意：form-horizontal更改了form-group的行为并使其模仿row，因此您可以避免额外的<div>

Bootstrap表单对齐不正确

3 个答案: