Javascript HTML表单没有响应

我有下面的代码，它由一个简单的HTML组成，我试图实现的是使这个表单具有移动响应性。我曾尝试将引导的网格添加到我的代码中，但当我最小化屏幕时，它似乎仍然不起作用

这就是我用当前代码最小化屏幕时得到的结果。

当我最小化屏幕时，这就是我希望表单的外观。有没有一个简单的方法来实现这一点？任何帮助都将不胜感激

$（）.ready（函数（））{
//提交评论表单时验证该表单
$（“#commentForm”）.validate（）；
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
fname：“必需”，
lname:“必需”，
密码：{
要求：正确，
最小长度：8
},
注册会计师密码：{
要求：正确，
最小长度：8，
equalTo:“#密码”
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
必填项：“#通讯：已选中”，
最小长度：2
},
同意：“必需”
},
信息：{
firstname：“需要您的名字。”，
姓氏：“请输入您的姓氏”，
用户名：{
必需：“请输入用户名”，
minlength：“您的用户名必须至少包含2个字符”
},
密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”
},
注册会计师密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”，
equalTo:“密码不匹配！”
},
电子邮件：“请输入有效的电子邮件地址”，
}
});
});
*{
框大小：边框框；
}
输入[type=“text”]，
输入[type=“email”]，
输入[type=“password”]{
填充：4px20px；
高度：35px；
边框：1px纯黑；
边界半径：3px；
宽度：100%；
}
.表格行{
弯曲方向：行；
显示器：flex；
}
.表格行>分区{
利润率：10px；
柔性生长：1；
}
.表格小组{
左边距：自动；
右边距：自动；
宽度：60%；
}
标签{
颜色：#d54445；
左边距：2倍；
边缘顶部：5px；
}
输入{
显示：块；
}

试试这个：-


$（）.ready（函数（））{
//提交评论表单时验证该表单
$（“#commentForm”）.validate（）；
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
fname：“必需”，
lname:“必需”，
密码：{
要求：正确，
最小长度：8
},
注册会计师密码：{
要求：正确，
最小长度：8，
equalTo:“#密码”
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
必填项：“#通讯：已选中”，
最小长度：2
},
同意：“必需”
},
信息：{
firstname：“需要您的名字。”，
姓氏：“请输入您的姓氏”，
用户名：{
必需：“请输入用户名”，
minlength：“您的用户名必须至少包含2个字符”
},
密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”
},
注册会计师密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”，
equalTo:“密码不匹配！”
},
电子邮件：“请输入有效的电子邮件地址”，
}
});
});
*{
框大小：边框框；
}
输入[type=“text”]，
输入[type=“email”]，
输入[type=“password”]{
填充：4px20px；
高度：35px；
边框：1px纯黑；
边界半径：3px；
宽度：100%；
}
.表格行{
弯曲方向：行；
显示器：flex；
}
.表格行>分区{
利润率：10px；
柔性生长：1；
}
.表格小组{
左边距：自动；
右边距：自动；
宽度：60%；
}
标签{
颜色：#d54445；
左边距：2倍；
边缘顶部：5px；
}
输入{
显示：块；
}
似乎您忘了在HTML中包含Bootsrap CDN，除了您需要为小型设备添加col-sm，为中型设备添加col-md之外，这就是您试图实现的目标吗


$（）.ready（函数（））{
//提交评论表单时验证该表单
$（“#commentForm”）.validate（）；
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
fname：“必需”，
lname:“必需”，
密码：{
要求：正确，
最小长度：8
},
注册会计师密码：{
要求：正确，
最小长度：8，
equalTo:“#密码”
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
必填项：“#通讯：已选中”，
最小长度：2
},
同意：“必需”
},
信息：{
firstname：“需要您的名字。”，
姓氏：“请输入您的姓氏”，
用户名：{
必需：“请输入用户名”，
minlength：“您的用户名必须至少包含2个字符”
},
密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”
},
注册会计师密码：{
必填：“请提供密码”，
minlength:“密码长度必须为8个字符”，
equalTo:“密码不匹配！”
},
电子邮件：“请输入有效的电子邮件地址”，
}
});
});
*{
框大小：边框框；
}
输入[type=“text”]，
输入[type=“email”]，
输入[type=“password”]{
填充：4px20px；
高度：35px；
边框：1px纯黑；
边界半径：3px；
宽度：100%；
}
.表格行>分区{
边缘底部：10px；
}
.表格小组{
左边距：自动；
右边距：自动；
宽度：60%；
}

@media only screen and (max-width : 768px){
    ... your css for mobile goes here
}

<form class="form-panel" id="signupForm">
            <div class="form-row form-name">
              <div class="col-6 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
              <div class="col-6 d-md-none"></div>
              <div class="col-6 col-lg-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
              <div class="col-6 d-md-none"></div>
            </div>
            <div class="form-row form-email">
              <div class="col-md-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
            </div>
            <div class="form-row form-password">
              <div class="col-6 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>
              <div class="col-6 d-md-none"></div>
              <div class="col-6 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
              <div class="col-6 d-md-none"></div>
            </div>
            <input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>

 <div class="container">
      <div class="row">
        <div class> 
          <div class=".col-lg-6 .col-sm-12"> 
            <input type="text" name="fname" id="fname" placeholder="First Name">
          </div>
          <div class=".col-lg-6 .col-sm-12"> 
            <input type="text" name="lname" id="lname" placeholder="Last Name">
          </div>
      </div>
 </div>