Question

您好我正在尝试做简单的登录网站，但我有一些bootstrap问题。我试图在我的网站中心做一个简单的div，但问题是，当我添加两个以上的输入时，输入不会扩展，它们比div大。问题在于较小的screnns。这是html代码：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class='container'>
			<form id='login'>
				<div class='form-group row'>
					<label for='email' class='col-form-label'></label>
					<div class="col-sm-offset-4 col-sm-4">
						<input type="email" id='login' class='form-control' placeholder="login">
					</div>
				</div>
				<div class='form-group row'>
					<label for='password' class='col-form-label'></label>
					<div class="col-sm-offset-4 col-sm-4">
						<input type="password" class='form-control' id='password' placeholder="password">
					</div>
				</div>
			</form>
		</div>
	</body>
</html>

这是我的css代码：

body {
	background-color: #ffffff;
	height: 100vh;
}
.container {
	background-color: #3b5f83;
	position: relative;
	top: 40%;
	height: 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#login {
	max-height: 60%;
}

感谢您的帮助

Answer 1

尺寸sm不是最小的移动视图。

替换

的所有实例

    col-sm-offset-4 col-sm-4

与

    col-xs-offset-4 col-xs-4

并且您的输入将保留在较小尺寸的元素内

为什么我的bootstrap输入比他们的父div更大

1 个答案: