标签：def 思路 field class 元素 val check pre tar
BootStrap有两种容器，.container和.container-fluid,一般情况下，如果内容比较多占据满屏直接用.container-fluid，不需要解决居中问题；
.container根据不同屏幕大小宽度不同，内容居中显示，如果内容能占据整个.container的宽度也不需要解决居中问题
但是如果.container中的内容比较少，那么看起来就没有居中效果
这里的解决思路是使用弹性盒子居中元素，再利用栅格系统设置不同屏幕大小时里面元素的大小，
重点代码
<div class="d-flex flex-column align-items-center">
<div class="row flex-fill justify-content-sm-center w-100 ">
<div class="col-md-10 col-lg-8 col-12">
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login - My ASP.NET Application</title> <link href="/Content/bootstrap.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.8.3.js"></script> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark "> <div class="container"> <a class="navbar-brand" href="/">Application name</a> <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item "> <a class="nav-link" href="#">About</a> </li> </ul> </div> </div> </div> <div class="container body-content"> <div class="d-flex flex-column align-items-center"> <h2>Login</h2> <div> 登陆前 </div> <div class="row flex-fill justify-content-sm-center w-100 "> <div class="col-md-10 col-lg-8 col-12"> <form Class="form-horizontal " action="/Account/Login" method="post"> <div class="form-group row "> <div class="col-sm-2 "> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> </div> <div class="col col-sm-10"> <input class="form-control text-box single-line" data-val="true" data-val-required="Email 字段是必需的。" id="Email" name="Email" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span> </div> </div> <div class="form-group row "> <div class="col-sm-2"> <label for="inputPassword3" class="col-form-label ">Password</label> </div> <div class="col col-sm-10"> <input class="form-control" data-val="true" data-val-required="Password 字段是必需的。" id="Password" name="Password" type="password" /> <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span> <a href="/SysUsers">主要</a>; </div> </div> <div class="form-group row "> <div class="offset-sm-2 col col-sm-10 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> </div> <div class="form-group row "> <div class="col-sm-offset-2 col col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> </div> </div> <hr /> <footer> <p>© 2020 - My ASP.NET Application</p> </footer> </div> <script src="/Scripts/jquery-3.4.1.js"></script> <script src="/Scripts/bootstrap.js"></script> </body> </html>
标签：def 思路 field class 元素 val check pre tar
原文地址：https://www.cnblogs.com/lidaying5/p/13329109.html
