我开始使用bootstrap 4
我的css
html{
height:100%;
background-color:#fff;
font-size:12px;
}
body.login-body{
height:100%;
background-color:#fff;
padding-top:20px;
}
在我的登录html中我创建了这段代码
<body class="login-body">
<div class="container h100">
<div class="row align-items-center h-100">
<div class="col-d-4 my-auto mx-auto">
<div class="text-center">
<img src="/img/perma-xsm.png" alt="">
</div>
<div class="login-box">
<div class="login-title">LCM</div>
<form class="form-signin" id="loginForm" action="/login" method="post">
<input type="text" name="username" id="username" class="form-control" placeholder="Email" required="" autofocus="">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
我尝试将verticaly和horizontaly对齐而没有成功登录
所以我的尝试是在flexbox parent
上使用align-items-center答案 0 :(得分:0)
我希望这会帮助你。制作容器高度:100%会起作用。
.login-body > .container{
height:100%;
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<style>
html{
height:100%;
background-color:#fff;
font-size:12px;
}
body.login-body{
height:100%;
background-color:#fff;
padding-top:20px;
}
</style>
<body class="login-body">
<div class="container h100">
<div class="row align-items-center h-100">
<div class="col-d-4 my-auto mx-auto">
<div class="text-center">
<img src="/img/perma-xsm.png" alt="">
</div>
<div class="login-box">
<div class="login-title">LCM</div>
<form class="form-signin" id="loginForm" action="/login" method="post">
<input type="text" name="username" id="username" class="form-control" placeholder="Email" required="" autofocus="">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;