引導間距問題
[英]Bootstrap spacing issue
問題描述
我正在嘗試使用 Bootstrap 從頭開始制作申請表。 除了這個問題，一切都很好。 這里的問題是，在加載時，ID 為officeaddress的元素在 HTML 頁面上不可見。 我嘗試使用my的 class 的 Bootstrap 並嘗試在其間添加換行符。 然而沒有結果。 特附上代碼供您參考。
<,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>
1 個解決方案
解決方案1
1 2021-03-17 19:19:46
您缺少關於“年收入”class 的“選擇”的結束標簽。
<,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> </select> </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>
Bootstrap導航欄間距問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.