Question

我在下面的代码中包含一个简单的HTML，我试图完成的工作是使此表单具有移动响应性。我试图将引导程序的网格添加到我的代码中，但是当我最小化屏幕时，它似乎仍然不起作用。

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

这是我希望屏幕最小化时的外观。有没有简单的方法可以做到这一点？任何帮助将不胜感激。

$().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>

Answer 1

似乎您忘记了在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>

Answer 2

您不需要引导程序，应该使用媒体查询： https://www.w3schools.com/css/css3_mediaqueries_ex.asp

例如，当屏幕低于600像素时，您可以将宽度更改为100％。

Answer 3

尝试一下：-

$().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-12 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>   
                  <div class="col-sm-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-sm-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
                </div>
                <div class="form-row form-password">
                  <div class="col-sm-12 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>

                  <div class="col-sm-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>

Answer 4

我不明白您在寻找什么，但请尝试一秒钟，这样看起来会更好吗？

* {
    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;
}
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
/* Clear floats after the columns */

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

<!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>
  <div class="container">
        <form class="form-panel" id="signupForm">
                <div class="row">
                  <div class="col-75"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
                  <div class="col-75"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
                </div>
                <div class="row">
                  <div class="col-75"><input type="email" name="email" id="email" placeholder="Email Address"></div>
                </div>
                <div class="row">
                  <div class="col-75"><input type="password" name="password" id="password" placeholder="Password"></div>
                  <div class="row">
                  <div class="col-75"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
                </div>
                  <div class="col-75">
                <input type="submit" class="btn btn-default submit-button" value="Sign up!">
                  </div>
              </form>
  </div>

</body>
</html>

Answer 5

您必须在CSS中使用媒体查询。
屏幕<768px时，它必须看起来像这样：

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

Answer 6

您应该使用一些Bootstrap类，例如col-md-6，col-sm-12，col-xs-12，row。 Jsfiddle

$().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-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

label {
  color: #d54445;
  margin-left: 2px;
  margin-top: 5px;
}

input {
  display: block;
  margin: 10px 0px;
}

<!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="row form-name">
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="text" name="fname" id="fname" placeholder="First Name"></div>

      <div class="col-md-6 col-sm-12 col-xs-12"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
    </div>
    <div class="row form-email">
      <div class="col-md-12 col-sm-12 col-xs-12"><input type="email" name="email" id="email" placeholder="Email Address"></div>
    </div>
    <div class="row form-password">
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="password" name="password" id="password" placeholder="Password"></div>
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
    </div>
    <input type="submit" class="btn btn-default submit-button col-md-6 col-sm-6 col-xs-6" value="Sign up!">
  </form>

</body>

</html>

Answer 7

问题与您使用引导程序有关。您需要了解col-sm-3意味着对于小型设备及以上设备，此列的宽度为3个单位。

引导程序的工作方式是您希望在视图缩回时扩展列，因此您应该这样做：

<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>

col-6为所有设备指定6个单位，col-md-3覆盖大中型设备的col-6。

棘手的部分是空div。引导程序的工作方式是：先填充一行包含12列的行，然后添加另一行，因此，如果您有像col-12这样的元素，则下一个元素将自动位于下一行。

因此在大屏幕和大屏幕上隐藏了一个空的col-6 div（d-md-none）。

您也可以使用引导程序4上的弹性框来完成此操作。flexbox doc

希望这很清楚。

Answer 8

正如您在引导程序文档（https://getbootstrap.com/docs/4.0/layout/grid/）的“网格选项”部分中所见，对于预定义的容器宽度（以像素为单位），您具有一些类前缀。

总是被遗忘的一件事是，您可以在div中添加多个类前缀。这样，您将获得有关可伸缩用户界面的完整体验：

 <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>

“名字和姓氏”输入字段将在大宽度（≥992px）的一行中显示，如果将此窗口压缩为≥576px，则姓氏div将跳到“名字”下。

Answer 9

据我了解， 1.）您需要在head标签中包含正确的Bootstrap脚本标签。

2。）您还需要包括bootsrap css文件。

3。）从放置col-sm的任何地方删除它，然后将div class =“ container”标记放在表单标记之外。例如，.....

这足够了。

HTML表单没有响应

9 个答案: