Bootstrap 4 粘性页脚不粘 | 粘性页脚不粘
本文介绍了Bootstrap 4 粘性页脚不粘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 不确定为什么粘性页脚在 Bootstrap 4 中不起作用.我有一个 TYPO3 网站，我是初学者.
粘性页脚未粘贴在页面底部.
这是已呈现的页面源的副本.
我基本上是从 bootstraps docs 文件夹中复制 html 文件，然后对其进行修改并将其复制到我的 TYPO3 模板中.
如果我用内容填充页面，页脚不会粘住 - 我必须向下滚动页面才能看到它.
<html lang="zh-cn"><头><meta charset="utf-8"><title>登陆页面</title><meta name="generator" content="TYPO3 CMS"><link rel="stylesheet" type="text/css"href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all"><link rel="stylesheet" type="text/css"href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"媒体=所有"><link rel="stylesheet" type="text/css"href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"媒体=所有"><脚本src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"type="text/javascript"></script><脚本src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"type="text/javascript"></script><脚本src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"type="text/javascript"></script><身体><div class="容器"><div class="mt-1"><h1>粘性页脚</h1><p class="lead">将固定高度的页脚固定到使用此自定义 HTML 和 CSS 的桌面浏览器中的视口.</p><p>使用 粘性页脚固定导航栏 如果需要，也是.</p><div class="row"><div class="col">1 of 3</div><div class="col">1 of 3</div><div class="col">1 of 3</div>
<footer class="footer"><div class="容器"><span class="text-muted">在此处放置粘性页脚内容.</span>
</页脚>
解决方案
2020 年更新 - Bootstrap 4.5+
现在 Bootstrap 4 是 flexbox ，使用 flexbox 制作粘性页脚会更容易.
<导航></nav><主类=flex-fill"></main><页脚></页脚>
Bootstrap 4.0 粘性页脚 (4.0.0)底部示例的简单页脚 (4.5.0)
注意: flex-fill 实用程序是 包含在以后的 Bootstrap 4.1 中 版本.所以在那之后发布额外的 flex-fill 的 CSS 将不再需要.此外，min-vh-100 包含在较新的 Bootstrap 4 版本中.
另见:Bootstrap 4 - 粘性页脚 - 动态页脚高度
Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
The sticky footer is not sticking at the bottom of the page.
Here is a copy of the page source as it has been rendered.
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
解决方案
Update 2020 - Bootstrap 4.5+
Now that Bootstrap 4 is flexbox , it's easier to use flexbox for the sticky footer.
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
Bootstrap 4.0 Sticky Footer (4.0.0)Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
这篇关于Bootstrap 4 粘性页脚不粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-23 03:21