引导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
注意：您必须使用codecen中的侧边栏视图才能真正看到页脚不在底部，因为codecen中的视图大小非常小，看起来很正确。
共有3个答案
首先添加show： flex；和flex-方向：列；到#page-容器。
现在，您已经“设置了将页脚与底部对齐的阶段”。将其margin top设置为auto（通过添加类mt auto）就完成了；
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
看到这个密码笔了吗。
如果想要固定页脚，只需将类fixed bottom添加到footer标记中，如下所示。
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
您可以使用内置的引导类来实现这一点。
你需要的是一个列flex容器的容器。要使用的类是：d-flex flex-block
要将容器设置为高度：100%，您可以将类h-100应用到html、正文和容器中，或者添加到容器样式高度：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>-
这是我的HTML： 这是我的CSS，仅用于页脚：
-
我正在为一个我正在设计的网站使用Bootstrap 3。 我想有一个像这个样本的页脚。样品 请注意，我不希望它被修复，所以bootstrap navbar-fixed-bottom不能解决我的问题。我只希望它总是在内容的底部，也是回应。 CSS
-
问题内容： 我通常熟悉使用CSS刷新页脚的技术。 但是我很难在Twitter引导程序中使用这种方法，这很可能是由于Twitter引导程序本质上是响应式的。使用Twitter引导程序，我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。 问题答案： 发现这里的代码片段非常适合引导 HTML： CSS：
-
问题内容： 我的页面只有几行内容。我希望页脚被推到底部。 我不想用 又名 粘性页脚 没有jQuery，这可能吗？ 有什么建议么？ 问题答案： 还有另一种粘页脚]由瑞安既成事实不使用位置固定的：
-
我试图找到一个解决方案，如何垂直对齐页脚中的两行，这两行用引导网格放置。 我已经尝试为内容制作一个包装器，并应用常规的flexbox解决方案：display:flex；对齐项目：居中。但这会将两行移动到同一行上。 在这里小提琴https://codepen.io/pen/WNNPdxv 超文本标记语言 CSS