如何使表单响应
[英]How to make a form responsive
问题描述
I have designed a contact form, I tried to make it responsive but I am stuck. 
我已经设计了一个联系表格，我试图使其具有响应性，但是我被卡住了。 I have tried with css but it's still not responsive. 我已经尝试过使用CSS，但是仍然没有响应。 Even panel panel-heading also looks awkward in my responsive mode. 在我的响应模式下，即使panel panel-heading也显得尴尬。 I tried to put a toggle on navbar to make it collapse but it's not working. 我试图在导航栏上放置一个切换开关以使其折叠，但它不起作用。 I have imported external bootstrap.min.css and bootstrap.min.js in my code. 我在代码中导入了外部bootstrap.min.css和bootstrap.min.js。 please help 请帮忙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial scale=1"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <!-- Theme CSS --> <link href="css/style.css" rel="stylesheet" "> <!-- Favicon --> <link rel="shortcut icon " href="img/favicon.ico "> <style> label { display: inline-block; margin-bottom: 5px; font-weight: 400; face: Calibri; } .panel-footer { padding: 20px 20px; margin-bottom: 10px; background-color: #fff; border-top: 0px solid #ddd; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 80px !important; } .close { float: right; font-size: 31px; margin-left: 22px; color: black; } button.close { padding: 1; padding-top: 1px; padding-right: 5px; font-weight: 700px background-color: black; } .underline { text-decoration: underline; } .form-control{ border-color: blue; } .panel-default { border-color: black; } } </style> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container "> <a href="# " class="navbar-brand "> <img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a> <center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center> <p class="navbar-text pull-left "> <a href=" " ></a></p> <p class="navbar-text pull-right "><a href=" ">Logout</a></p> </div> </div> <br/><br/><br/><br/><br /> <div class="container "> <div class="row "> <div class="col-sm-12 col-md-6 "> <h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br /> </div> </div> <br /> <form class="form-horizontal " id="myform "> <h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4> <form class="form-horizontal "> <div class="panel panel-default "> <button type="button " class="close " data-dismiss="modal "> <font color="black "> <a href="hrtoolkit.html "> <span class="underline " id="u ">×</span></a></font> </button> <div class="form-body "> <br /> <div class="row "> <div class="col-md-12 "> <div class="col-md-4 "> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " /> <option hidden value=" ">Gender</option> <option value="male ">Male</option> <option value="female ">Female</option> <option value="other ">Other</option> </select> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="email " class="form-control " id="eMail " pattern="^[\\w.+\\-]+@infinitumglobal\\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity( 'Email ID Required format example@infinitumglobal.com') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Middle Name</label> <div class="col-md-7 "> <input type="text " class="form-control " id="mname " placeholder="Middle Name "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="panel-footer text-right "> <button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button> </div> </div> </div> </div> </div> </div> </form> </form> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
0 2018-05-10 10:09:41
you have to add the script that I added 您必须添加我添加的script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Take a look here: https://www.w3schools.com/bootstrap/default.asp 在这里看看： https : //www.w3schools.com/bootstrap/default.asp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Theme CSS --> <link href="css/style.css" rel="stylesheet" "> <!-- Favicon --> <link rel="shortcut icon " href="img/favicon.ico "> <style> label { display: inline-block; margin-bottom: 5px; font-weight: 400; face: Calibri; } .panel-footer { padding: 20px 20px; margin-bottom: 10px; background-color: #fff; border-top: 0px solid #ddd; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 80px !important; } .close { float: right; font-size: 31px; margin-left: 22px; color: black; } button.close { padding: 1; padding-top: 1px; padding-right: 5px; font-weight: 700px background-color: black; } .underline { text-decoration: underline; } .form-control{ border-color: blue; } .panel-default { border-color: black; } } </style> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container "> <a href="# " class="navbar-brand "> <img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a> <center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center> <p class="navbar-text pull-left "> <a href=" " ></a></p> <p class="navbar-text pull-right "><a href=" ">Logout</a></p> </div> </div> <br/><br/><br/><br/><br /> <div class="container "> <div class="row "> <div class="col-sm-12 col-md-6 "> <h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br /> </div> </div> <br /> <form class="form-horizontal " id="myform "> <h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4> <form class="form-horizontal "> <div class="panel panel-default "> <button type="button " class="close " data-dismiss="modal "> <font color="black "> <a href="hrtoolkit.html "> <span class="underline " id="u ">×</span></a></font> </button> <div class="form-body "> <br /> <div class="row "> <div class="col-md-12 "> <div class="col-md-4 "> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " /> <option hidden value=" ">Gender</option> <option value="male ">Male</option> <option value="female ">Female</option> <option value="other ">Other</option> </select> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="email " class="form-control " id="eMail " pattern="^[\\w.+\\-]+@infinitumglobal\\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity( 'Email ID Required format example@infinitumglobal.com') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Middle Name</label> <div class="col-md-7 "> <input type="text " class="form-control " id="mname " placeholder="Middle Name "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="panel-footer text-right "> <button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button> </div> </div> </div> </div> </div> </div> </form> </form> </div> </div> </div> </body> </html>
解决方案2
0 2018-05-10 16:46:05
This should do it 这应该做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Theme CSS --> <link href="css/style.css" rel="stylesheet" "> <!-- Favicon --> <link rel="shortcut icon " href="img/favicon.ico "> <style> .form-group{ padding: 15px; } label { display: inline-block; margin-bottom: 5px; font-weight: 400; face: Calibri; } .panel-footer { padding: 20px 20px; margin-bottom: 10px; background-color: #fff; border-top: 0px solid #ddd; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 80px !important; } .close { float: right; font-size: 31px; margin-left: 22px; color: black; } button.close { padding: 1; padding-top: 1px; padding-right: 5px; font-weight: 700px background-color: black; } .underline { text-decoration: underline; } .form-control{ border-color: blue; } .panel-default { border-color: black; } } </style> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a href="#" class="navbar-brand "> <img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" height="30" width="202" class="pull-left "></a> <center> <p class="navbar-text pull-right"> <a href="">Ticker </a></p></center> <p class="navbar-text pull-right"> <a href="" >Banner</a></p> <p class="navbar-text pull-right"><a href="">Logout</a></p> </div> </div> <br/><br/><br/><br/><br /> <div class="container "> <div class="row "> <div class="col-sm-12 col-md-6 "> <h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br /> </div> </div> <br /> <form class="form-horizontal " id="myform "> <h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4> <form class="form-horizontal "> <div class="panel panel-default "> <button type="button " class="close " data-dismiss="modal "> <font color="black "> <a href="hrtoolkit.html "> <span class="underline " id="u ">×</span></a></font> </button> <div class="form-body "> <br /> <div class="row "> <div class="col-md-12 "> <div class="col-md-4 "> <div class="row "> <div class="form-group"> <label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " /> <option hidden value=" ">Gender</option> <option value="male ">Male</option> <option value="female ">Female</option> <option value="other ">Other</option> </select> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="email " class="form-control " id="eMail " pattern="^[\\w.+\\-]+@infinitumglobal\\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity( 'Email ID Required format example@infinitumglobal.com') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Middle Name</label> <div class="col-md-7 "> <input type="text " class="form-control " id="mname " placeholder="Middle Name "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div> <div class="panel-footer text-right "> <button type="submit " id="btnSave " class="btn btn-lg pull-right " style="background-color: #90EE90; ">Save</button> </div> </div> </div> </div> </div> </div> </form> </form> </div> </div> </div> </body> </html>
解决方案3
0 2018-05-10 17:13:03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Theme CSS --> <link href="css/style.css" rel="stylesheet" "> <!-- Favicon --> <link rel="shortcut icon " href="img/favicon.ico "> <style> label { display: inline-block; margin-bottom: 5px; font-weight: 400; face: Calibri; } .panel-footer { padding: 20px 20px; margin-bottom: 10px; background-color: #fff; border-top: 0px solid #ddd; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 80px !important; } .close { float: right; font-size: 31px; margin-left: 22px; color: black; } button.close { padding: 1; padding-top: 1px; padding-right: 5px; font-weight: 700px background-color: black; } .underline { text-decoration: underline; } .form-control{ border-color: blue; } .panel-default { border-color: black; } } </style> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container "> <a href="# " class="navbar-brand "> <img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a> <center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center> <p class="navbar-text pull-left "> <a href=" " ></a></p> <p class="navbar-text pull-right "><a href=" ">Logout</a></p> </div> </div> <br/><br/><br/><br/><br /> <div class="container "> <div class="row "> <div class="col-sm-12 col-md-6 "> <h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br /> </div> </div> <br /> <form class="form-horizontal " id="myform "> <h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4> <form class="form-horizontal "> <div class="panel panel-default "> <button type="button " class="close " data-dismiss="modal "> <font color="black "> <a href="hrtoolkit.html "> <span class="underline " id="u ">×</span></a></font> </button> <div class="form-body "> <br /> <div class="row "> <div class="col-md-12 "> <div class="col-md-4 "> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " /> <option hidden value=" ">Gender</option> <option value="male ">Male</option> <option value="female ">Female</option> <option value="other ">Other</option> </select> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="email " class="form-control " id="eMail " pattern="^[\\w.+\\-]+@infinitumglobal\\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity( 'Email ID Required format example@infinitumglobal.com') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <!--<div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div>--> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Middle Name</label> <div class="col-md-7 "> <input type="text " class="form-control " id="mname " placeholder="Middle Name "> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 "><span style="color: red; ">*</span> </label> <div class="col-md-7 "> <input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> </div> <div class="col-md-4 "> <!--<div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div>--> <div class="row "> <div class="form-group "> <label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " /> </div> </div> </div> <!--<div class="row " style="visibility: hidden "> <div class="form-group "> <label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label> <div class="col-md-7 "> <input type="text " class="form-control " id="formGroupExampleInput2 "> </div> </div> </div>--> <div class="panel-footer text-right "> <button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button> </div> </div> </div> </div> </div> </div> </form> </form> </div> </div> </div> </body> </html>
The issue was with "row" which you have added with style= "visibility: hidden". 问题出在您用style =“ visibility：hidden”添加的“ row”。 Use "display" property of CSS to show/hide any component in HTML. 使用CSS的“ display”属性可以显示/隐藏HTML中的任何组件。 Visibility CSS property hides the visibility of HTML tag but the area covered by component still remains as it is. 可见性CSS属性隐藏HTML标记的可见性，但组件所覆盖的区域仍保持原样。
I have added all such "row" in comments and the issue was resolved. 我已在注释中添加了所有此类“行”，并且此问题已解决。 Hope this helps you. 希望这对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使嵌入表单具有响应性？ - How can I make a embeded form responsive?
如何使用JqGrid编辑表单做出响应 - How to JqGrid EDIT form make responsive
使表单响应到div - Make a form responsive into a div
如何使我的引导表单响应？ - How do I make my bootstrap form responsive?
如何使滑块响应？ - How to make slider responsive?
如何使iframe响应 - how to make a iframe responsive
如何使块引用响应？ - How to make blockquote responsive?
如何使滚动框响应？ - How to make scrollbox responsive?
如何使这个 SVG 响应？ - How to make this SVG responsive?
如何使JQuery响应？ - How to make JQuery responsive?
相关标签