您好，我正在尝试做一个简单的登录站点，但我在 Bootstrap 方面遇到了一些问题。我正在尝试在我的网站中心做一个简单的 div，但问题是当我添加两个以上的输入时，输入不会缩放并且它们比 div 大。问题出在较小的屏幕上。 这是 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%;
}感谢帮助
最佳答案
尺寸 sm 不是最小的移动 View 。
替换
的所有实例 col-sm-offset-4 col-sm-4
与
col-xs-offset-4 col-xs-4
并且您的输入将保留在较小尺寸的元素中
关于html - 为什么我的 bootstrap inputs 比他们的 parent div 大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43879054/