Ошибка Bootstrap: Работа на мобильном/ноутбуке, но не на рабочем столе

Question

Я новичок в разработке интерфейса и модификации существующей формы на целевой странице (добавив дополнительную колонку). Когда я добавляю этот столбец, он отлично отображает все устройства (кроме рабочего стола).

Буду признателен за возможные причины и как исправить это.

Вот копия моего кода ниже:

<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"/>&nbsp;&nbsp;Female</label> 
          <label><input class="gender" type="radio" name="gender" id="gender" value="Male"/>&nbsp;&nbsp;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"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td> 
          <td><span>I would like to sign up to emails</span></td> 
         </tr> 
         </table> 
         </div> 
        </div> 

Answer 1

Вы есть проблема в вашей надбавке. Попробуйте что-то вроде this--

<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"/>&nbsp;&nbsp;Female</label> 
 
          <label><input class="gender" type="radio" name="gender" id="gender" value="Male"/>&nbsp;&nbsp;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"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td> 
 
          <td><span>I would like to sign up to emails</span></td> 
 
         </tr> 
 
         </table> 
 
         </div> 
 
         </div> 
 
        </div>

Answer 2

разделяет код или использовать

в бутстраповском использовании

class="col-lg-14 col-md-14 col-sm-5 col-xs-12" 

для использования в настольных Л.Г. и мкр