html - Bootstrap 4 粘性页脚不粘

标签 html css typo3 bootstrap-4 sticky-footer

不太确定为什么粘性页脚在 Bootstrap 4 中不起作用。我有一个 TYPO3 网站,我是初学者。

粘性页脚没有粘在页面底部。

这是已呈现的页面源代码的副本。

我基本上是从 bootstraps 文档文件夹中复制 html 文件,然后修改它并将其复制到我的 TYPO3 模板中。

如果我用内容填充页面,页脚不会固定 - 我必须向下滚动页面才能看到它。

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

最佳答案

2020 更新 - Bootstrap 4.5+

现在 Bootstrap 4 是flexbox,使用 flexbox 制作粘性页脚会更容易。

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

注意:flex-fill 实用程序是 included in Bootstrap 4.1 at later发布。因此,在发布之后,将不再需要用于 flex-fill 的额外 CSS。此外,min-vh-100 包含在较新的 Bootstrap 4 版本中。

另见:Bootstrap 4 - Sticky footer - Dynamic footer height

关于html - Bootstrap 4 粘性页脚不粘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46722697/

相关文章:

javascript - 在基本图像上的特定区域单击时在弹出窗口(同一窗口)中显示图像

html - 基于字体粗细的 CSS 选择器?

javascript - 如何折叠左侧面板?

c# - <form>中的Asp.net core设置后台

image - TYPO3 新闻 : show first image in preview

html - 第一列固定宽度的CSS表有无法解释的差距

javascript - Phonegap 2.8 位置 : fixed is not working properly

mysql - 'tx_bundesligasimulator_domain_model_player.name' 中的未知列 'field list'

php - Typo3 DateTime setter 问题

html - 如何选择子节点而不是第一个元素