Bootstrap 4登录表单，将其放在页面中间 [英] Bootstrap 4 login form placing it in the middle of the page
本文介绍了Bootstrap 4登录表单，将其放在页面中间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
bootstrap 4登录表单，将其放在页面中间，即时表示有问题> :(
bootstrap 4 login form placing it in the middle of the page ,im having a problem doing that >:(
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body style="background-color:#87CEEB ;>
<div class="container">
<div class="Absolute-Center is-Responsive">
<div class="col-xs-3 col-sm-6 col-md-5 col-lg-4 col-xl-3 ">
<form align="align-items-center" id="form" class="form-signin " method="post">
<div class="d-flex justify-content-center align-items-center" >
<h2 id="heading" class="form-signin-heading"><strong>Please sign in</strong></h2>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" required autofocus>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
.form-signin
{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-top:280px;
background-color:#F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
}
#heading
{
padding-bottom: 20px;
}
我尝试过：
尝试了一切
What I have tried:
tried everything
推荐答案
你错过了Bootstrap最重要的功能。
Bootstrap devide the屏幕垂直分为12个部分。您必须根据需要对这些部分进行分组。
Hi,
You are missing the most important feature of Bootstrap.
Bootstrap devide the screen verticaly into 12 sections. you have to group this sections depending on your need.
<div class="container">
<div class="row">
<div class="col-sm-2">
<!-- 2 empty sections in the left -->
</div>
<div class="col-sm-8">
<!--Your form goes here -->
</div>
<div class="col-sm-2">
<!-- 2 empty sections in the right -->
</div>
</div>
</div>
只要同一行中的总和为12，你就可以按喜欢分组。
这是一个快速简单的教程： Bootstrap 3教程 [ ^ ]
这篇关于Bootstrap 4登录表单，将其放在页面中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
