Html 引导窗体对齐不正确
以下代码是为表单编写的，但from在引导中没有正确对齐。 虽然我已经把表格分成了几行，但我不明白的是第一列是如何没有正确对齐的。我试了很多东西，但都没想出来。 帮我把这做好Html 引导窗体对齐不正确,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,以下代码是为表单编写的，但from在引导中没有正确对齐。 虽然我已经把表格分成了几行，但我不明白的是第一列是如何没有正确对齐的。我试了很多东西，但都没想出来。 帮我把这做好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &
<!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>
卷号：
学校代码：
过去年份：
名字：
中名：
姓氏：
父亲的名字：
父亲的中间名：
父亲的姓：
母亲的名字：
母亲的中间名：
母亲的姓：
性别：
男性
女性
手机号码：
Aadhar编号：
电邮：
出生日期：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
宗教：
年龄：
类别：
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>
row>col-xs-4>表格组>col-sm-6
卷号：
学校代码：
过去年份：
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>
row>col-xs-4>表格组>col-sm-6
卷号：
学校代码：
过去年份：
根据您的布局，我建议将
表单水平控制标签添加到所有标签中。此外，我会将您的表单重新组织为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>
卷号：
学校代码：
过去年份：
注意：表单水平
更改表单组的行为
并使其模仿行
，因此您可以根据布局避免额外的
，我建议将表单水平
添加到
中，并将控制标签
添加到所有标签中。此外，我会将您的表单重新组织为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
更改表单组的行为，并使其模仿行
，因此您可以避免额外的
我在使用django-bootstrap3时遇到这种情况，使用{%bootstrap\u field form.attribute%}
模板标记
问题是您使用的表单组标记太多。您只需要在整个表单输入组周围设置一个。在删除标记并删除现在多余的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-bootstrap3时遇到了这个问题，使用的是{%bootstrap\u field form.attribute%}
模板标记
问题是您使用了太多的表单组标记。您只需要在整个表单输入组周围设置一个。在删除标记并删除现在多余的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>
仍然存在对齐问题，第二个和第三个输入字段低于第一个。您必须将所有行类应用于相同的格式<代码>行>col-xs-4>表单组>col-sm-6
仍然存在对齐问题，第二个和第三个输入字段低于第一个。您必须将所有行类应用于相同的格式<代码>行>列-xs-4>表单组>列-sm-6