码迷,mamicode.com
首页 > 其他好文 > 详细

BootStrap居中

时间:2020-07-17 13:56:40      阅读:61      评论:0      收藏:0      [点我收藏+]

标签: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>&copy; 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>

 

BootStrap居中

标签:def   思路   field   class   元素   val   check   pre   tar   

原文地址:https://www.cnblogs.com/lidaying5/p/13329109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!