Bootstrap 4粘页脚不粘 | 4粘页脚不粘

本文介绍了Bootstrap 4粘页脚不粘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

粘性页脚未粘在页面底部.

此处是页面源的副本，已呈现.

我基本上是从bootstraps docs文件夹中复制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 sticky-footer-wrapper">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Bootstrap 4.0粘性页脚(4.0.0)
底部示例的简单页脚(4.5.0)

注意: flex-fill实用程序包含在Bootstrap 4.1中稍后发布.因此，在该版本发布之后，就不需要多余的CSS来进行flex-fill填充.

另请参阅: 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 sticky-footer-wrapper">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

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.

Also see: Bootstrap 4 - Sticky footer - Dynamic footer height

这篇关于Bootstrap 4粘页脚不粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！