boostrap类的提醒 https://getbootstrap.com/docs/4.5/utilities/flex/有关调整大小的信息,请参见 https://getbootstrap.com/docs/4.5/实用程序/大小/ I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.I tried these answers for example:Bootstrap footer not at bottomFlushing footer to bottom of the page, twitter bootstrapHeight not 100% on Container Fluid even though html and body areBut I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.This is the code for my footer:<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"><footer class="d-flex justify-content-center"> <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5"> <div class="align-left"> <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> | <a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> | <a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a> </div> <div class="align-right small"> Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a> </div> </div></footer>I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:https://codepen.io/anon/pen/oMZVxqNote: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly. 解决方案 You can use built-in bootstrap class to achieve this.What you need is the container to be a column flex container . class to use are : d-flex flex-columnTo set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;For the footer, a margin-top:auto will do, the class to use is : mt-auto;example below to run in full page mode<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><html class="h-100"> <body class="h-100"> <!-- Page Container --> <div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column"> <!-- Header --> <nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center"> <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between"> <div class="d-flex justify-content-start align-items-center"><a href="/" class="kf-links"> <span class="h5"> <i class="fas fa-paper-plane"></i> <span class="h4 font-weight-bold kf-dark"> MyPage </span> </span></a> </div> <!-- Main Header Navigation --> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a href="/" class="nav-link ">Link1</a> </li> <li class="nav-item"> <a href="" class="nav-link ">Link2</a> </li> <li class="nav-item"> <a href="" class="nav-link ">Link3</a> </li> </ul> </div> <!-- END Main Header Navigation --> </div> </nav> <!-- END Header --> <!-- Main Container --> <div style="background:#5c90d2"> <div class="col-md-12 text-center pt-5 pb-5"> <div class="pt-5 pb-5"> <h1> <span class="main-text"> Login </span> </h1> <p class="lead"><span class="main-text"> Login Now! </span></p> </div> </div> </div> <!-- Content --> <div class="d-flex justify-content-center fadeIn"> <div class="col-md-8 col-xs-12"> <div class="d-flex justify-content-center"> <div class="col-md-6 pt-5 pb-5 pr-0 pl-0"> <form class="form-horizontal" method="post"> <div class="form-group"> <div class="col-xs-12"> <div class=""> <label for="id_username">E-Mail</label> <input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required> </div> </div> </div> <div class="form-group"> <div class="col-xs-12"> <div class=""> <label for="id_password">Password</label> <input id="id_password" class="form-control" name="password" type="password" required> </div> </div> </div> <div class="form-group"> <div class="col-xs-12"> <small class="float-right"> <a href="#" class="kf-links">Forgot Password?</a> </small> </div> </div> <div class="form-group mt-5"> <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0"> <button class="btn btn-sm btn-block btn-primary" type="submit">Login</button> </div> </div> </form> </div> </div> </div> </div> <!-- END Content --> <!-- END Main Container --> <!-- Footer --> <footer class="d-flex justify-content-center mt-auto"> <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5"> <!-- Copyright Info --> <div class="align-left"> <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> | <a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> | <a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a> </div> <div class="align-right small"> Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a> </div> <!-- END Copyright Info --> </div> </footer> <!-- END Footer --> </div> <!-- END Page Container --> </body></html>codepen updated https://codepen.io/anon/pen/PBpgNNreminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/ 这篇关于Bootstrap 4:页脚不在底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
05-28 08:36
查看更多