我在下面有这段代码，其中包含一个简单的 HTML，我想要完成的是使此表单具有移动响应能力。我试图将 Bootstrap 的网格添加到我的代码中，但是当我最小化屏幕时它似乎仍然不起作用。
这是我使用当前代码最小化屏幕时得到的结果。
这就是我希望我的表单在最小化屏幕时的样子。有没有一种简单的方法可以做到这一点？任何帮助将不胜感激。
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must be 8 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Password must be 8 characters long",
equalTo: "Password do not match!"
},
email: "Please enter a valid email address",
}
});
});* {
box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width:100%;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-row > div {
margin: 10px;
flex-grow:1;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}
label{
color:#d54445;
margin-left: 2px;
margin-top: 5px;
}
input {
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<div class="col-sm-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
<div class="col-sm-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
</div>
<div class="form-row form-email">
<div class="col-sm-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
</div>
<div class="form-row form-password">
<div class="col-sm-3"><input type="password" name="password" id="password" placeholder="Password"></div>
<div class="col-sm-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
</body>
</html>最佳答案
您似乎忘记在您的 HTML 中包含 Bootsrap CDN，此外您还需要为小型设备添加 col-sm 以及为中型设备添加 col-md，这是您想要完成的吗？
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must be 8 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Password must be 8 characters long",
equalTo: "Password do not match!"
},
email: "Please enter a valid email address",
}
});
});* {
box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width:100%;
}
.form-row > div {
margin-bottom: 10px;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<div class="col-12 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
<div class="col-12 col-md-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
</div>
<div class="form-row form-email">
<div class="col-12 col-md-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
</div>
<div class="form-row form-password">
<div class="col-12 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>
<div class="col-12 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
</body>
</html> 关于javascript - HTML 表单没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51417866/