Bootstrap 4粘脚没有粘住
问题描述:
不确定为什么粘脚没有在Bootstrap 4中工作。我有一个TYPO3网站,我是初学者。Bootstrap 4粘脚没有粘住
粘性页脚不粘在页面的底部。
以下是已呈现的页面源的副本。
我基本上从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"
\t href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
\t href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
\t media="all">
<link rel="stylesheet" type="text/css"
\t href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
\t media="all">
<script
\t src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
\t type="text/javascript"></script>
<script
\t src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
\t type="text/javascript"></script>
<script
\t src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
\t type="text/javascript"></script>
</head>
<body>
\t <div class="container">
\t \t <div class="mt-1">
\t \t \t <h1>Sticky footer</h1>
\t \t </div>
\t \t <p class="lead">Pin a fixed-height footer to the bottom of the
\t \t \t viewport in desktop browsers with this custom HTML and CSS.</p>
\t \t <p>
\t \t \t Use <a href="../sticky-footer-navbar">the sticky footer with a
\t \t \t \t fixed navbar</a> if need be, too.
\t \t </p>
\t \t <div class="row">
\t \t \t <div class="col">1 of 3</div>
\t \t \t <div class="col">1 of 3</div>
\t \t \t <div class="col">1 of 3</div>
\t \t </div>
\t </div>
\t <footer class="footer">
\t \t <div class="container">
\t \t \t <span class="text-muted">Place sticky footer content here.</span>
\t \t </div>
\t </footer>
</body>
</html>
答
好不容易才弄明白。也许我对“粘滞”是什么有什么误解,但解决方案是改变绝对 - >固定在CSS文件中。
例如来自:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
到:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
请检查你的CSS文件路径... – sajee
@sajee文件路径是正确的。我已经通过查看源文件进行了验证 - >然后点击每个文件以查看它是否加载文本,然后执行。 – Daryn
当我检查您提供的conde片段时,没有任何样式应用于HTML内容。 – sajee