Question

我开始使用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

Answer 1

我希望这会帮助你。制作容器高度：100％会起作用。

＆＃13;

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

中心X和Y是带有引导程序4的登录屏幕

1 个答案: