我是前端开发的新手,并且在登录页面上修改现有表单(添加了额外的列)。当我添加此列时,它可以在所有设备(台式机除外)上正常显示。
我将对可能的原因以及如何解决此问题提供指导。
这是下面我的代码的副本:
<div class="fields">
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>First Name*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="40" name="fname" id="fname" required/></div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Last Name*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="40" name="lname" id="lname" required/></div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl" style="padding-right:0px"><label>Email Address*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required /></div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Gender*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld">
<label style="width: 100px;"><input class="gender" type="radio" name="gender" id="gender" value="Female"/> Female</label>
<label><input class="gender" type="radio" name="gender" id="gender" value="Male"/> Male</label>
</div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Date of Birth*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld" style="margin-bottom: 10px;">
<select id="daydropdown" style="width: 64px" name="date" id="date" required><option value="" disabled selected>DD</option></select>
<select id="monthdropdown" style="width: 64px" name="month" id="month" required><option value="" disabled selected>MM</option></select>
<select id="yeardropdown" style="width: 74px" name="year" id="year" required><option value="" disabled selected>YYYY</option></select>
</div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Country*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><select id="countrydropdown" style="width: 100%;" name="country" id="country" required><option value="">--Please Select--
</option>
</select></div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Postcode*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="20" name="postcode" id="postcode" required/></div>
</div>
<div>
<div class="col-lg-12 col-md-12 col-sm-12 lbl">
<table>
<tr>
<td><span><input type="checkbox" id="signupcheckbox"/> </span></td>
<td><span>I would like to sign up to emails</span></td>
</tr>
</table>
</div>
</div>
最佳答案
您的加价有问题。试试这样的东西-
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="fields container-fluid">
<div class="row">
<div class=" lbl"><label>First Name*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="40" name="fname" id="fname" required/></div>
</div>
<div>
<div class="row">
<div class=" lbl"><label>Last Name*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="40" name="lname" id="lname" required/></div>
</div>
</div>
<div>
<div class="row">
<div class=" lbl" style="padding-right:0px"><label>Email Address*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required /></div>
</div>
<div>
</div>
<div class="row">
<div class=" lbl"><label>Gender*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld">
<label style="width: 100px;"><input class="gender" type="radio" name="gender" id="gender" value="Female"/> Female</label>
<label><input class="gender" type="radio" name="gender" id="gender" value="Male"/> Male</label>
</div>
</div>
<div>
</div>
<div class="row">
<div class=" lbl"><label>Date of Birth*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld" style="margin-bottom: 10px;">
<select id="daydropdown" style="width: 64px" name="date" id="date" required><option value="" disabled selected>DD</option></select>
<select id="monthdropdown" style="width: 64px" name="month" id="month" required><option value="" disabled selected>MM</option></select>
<select id="yeardropdown" style="width: 74px" name="year" id="year" required><option value="" disabled selected>YYYY</option></select>
</div>
</div>
</div>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 lbl"><label>Country*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><select id="countrydropdown" style="width: 100%;" name="country" id="country" required><option value="">--Please Select--
</option>
</select></div>
</div>
<div>
<div class="row">
<div class="lbl"><label>Postcode*</label></div>
<div class="col-lg-8 col-md-8 col-sm-8 fld"><input type="text" maxlength="20" name="postcode" id="postcode" required/></div>
</div>
</div>
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 lbl">
<table>
<tr>
<td><span><input type="checkbox" id="signupcheckbox"/> </span></td>
<td><span>I would like to sign up to emails</span></td>
</tr>
</table>
</div>
</div>
</div>