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

分享代码或使用

在bootstrap中使用

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

用于桌面使用lg和md

Bootstrap错误：在移动/笔记本电脑上工作但不在桌面上工作

1 个答案: