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>

來源

2017-10-13 Daryn

請檢查你的CSS文件路徑... – sajee

@sajee文件路徑是正確的。我已經通過查看源文件進行了驗證 - >然後點擊每個文件以查看它是否加載文本，然後執行。 – Daryn

當我檢查您提供的conde片段時，沒有任何樣式應用於HTML內容。 – sajee

好不容易纔弄明白。也許我對「粘滯」是什麼有什麼誤解，但解決方案是改變絕對 - >固定在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; 
}

來源

2017-10-13 05:33:08 Daryn

Bootstrap 4粘腳沒有粘住

回答

相關問題