【发布时间】：2021-03-18 03:19:46
【问题描述】：
我正在尝试使用 Bootstrap 从头开始制作申请表。除了这个问题，一切都很好。这里的问题是 ID 为 officeaddress 的元素在加载时在 HTML 页面上不可见。我尝试使用 Bootstrap 的my 类，还尝试在其间添加换行符。然而没有结果。特附上代码供大家参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent's details</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
</head>
<body>
<div class="container"> <br>
<h1 class="text-center">Your Parent's details</h1>
<form>
<div class="form-row">
<div class="form-group col-md-6 ">
<label for="fathername">Father's name: </label>
<input type="text" class="form-control" id="fathername">
</div>
<div class="form-group col-md-6">
<label for="mothername">Mother's name: </label>
<input type="text" class="form-control" id="mothername">
</div>
<div class="form-group col-md-6">
<label for="fatherno">Father's no. : </label>
<input type="number" class="form-control" id="fatherno">
</div>
<div class="form-group col-md-6">
<label for="motherno">Mother's no. : </label>
<input type="number" class="form-control" id="motherno">
</div>
<div class="form-group col-md-6">
<label for="fathermail">Father's mail ID : </label>
<input type="email" class="form-control" id="fathermail">
</div>
<div class="form-group col-md-6">
<label for="mothermail">Mother's mail ID : </label>
<input type="email" class="form-control" id="mothermail">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="annualincome">Annual Income:</label>
<select id="annualincome" class="form-control">
<option selected>Select:</option>
<option value="<50000"><50,000</option>
<option value=">50000 and <200000"> >50,000 and <2,00,000</option>
<option value=">200000 and <500000"> >2,00,000 and <5,00,000</option>
<option value=">500000 and <800000"> >5,00,000 and <8,00,000</option>
<option value=">800000 and <1000000"> >8,00,000 and <10,00,000</option>
<option value=">1000000 and <1200000"> >10,00,000 and <12,00,000</option>
<option value=">1200000"> >1200000</option>
</div>
</div>
<div class="form-group col-md-6">
<label for="officeaddress">Office Address line 1</label>
<input type="text" class="form-control" id="pfficeaddress">
</div>
<div class="form-group col-md-6">
<label for="officeaddress2">Office Address line 2</label>
<input type="text" class="form-control" id="officeaddress2">
</div>
<div class="form-group col-md-6">
<label for="officeno">Office no. : </label>
<input type="number" class="form-control" id="officeno">
</div>
</form>
<a href="educational.html">Proceed to enter educational details</a>
</body>
</html>【问题讨论】：
-
离题：您在底部缺少一个结束
div标记，并且不应将换行元素用于布局间距。 -
错字：
pfficeaddress -
您还缺少一个结束
select标记。我建议更好的编辑器设置或通过 HTML 验证器运行。 -
是的。我刚刚意识到我错过了
select标签。在发布问题之前我没有注意到它。应尽量不要再重复同样的事情。感谢您的快速回复:) -
随时删除您的问题以恢复声誉积分。
标签： html web frontend bootstrap-5