Bootstrap 4：页脚不在底部

我知道这个问题可能被问了几百次，但遗憾的是我在这里找到的答案并没有真正帮助我。

例如，我尝试了这些答案：

但是我仍然有一个问题，当我的页面内容“小”并且没有填满主体/页面容器的整个高度时，页脚只是浮动在浏览器窗口末端上方的某个地方。

这是我的页脚的代码：

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

我正在使用 Bootstrap 4.1 和 Chrome，这也是我网站的代码笔：

https://codepen.io/anon/pen/oMZVxq

注意：您必须使用 codepen 中的侧边栏视图才能真正看到页脚不在底部，因为 codepen 中的视图尺寸太小以至于看起来正确。

原文由 NakedPython 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 479

您可以使用内置的引导程序类来实现这一点。

你需要的是容器成为一个 column flex container 。要使用的类是： d-flex flex-column

要将容器设置为高度：100%，您可以将类 h-100 应用于 html、正文和容器或添加到容器样式 height:100vh;

对于页脚，一个 margin-top:auto 就可以了，要使用的类是： mt-auto ；

下面的示例以全页模式运行

 <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 更新 https://codepen.io/anon/pen/PBpgNN

boostrap 类的提醒 https://getbootstrap.com/docs/4.5/utilities/flex/ 关于调整大小请参阅 https://getbootstrap.com/docs/4.5/utilities/sizing/

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Bootstrap 4：页脚不在底部

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译