首頁 > web前端 > css教學 > 如何修復 Twitter Bootstrap 中導覽列阻止網站內容的問題?

如何修復 Twitter Bootstrap 中導覽列阻止網站內容的問題?

Susan Sarandon
發布: 2024-11-27 12:52:12
原創
458 人瀏覽過

How to Fix Navbar Blocking Website Content in Twitter Bootstrap?

導覽列阻止網站內容

使用 Twitter Bootstrap 的頂部固定導覽列時會出現此問題。最初,使用者在查看頁面頂部時可能會發現內容被導覽列遮擋。為了糾正這個問題並防止內容被阻止,可以實施以下解決方案:

根據回應中的建議,簡單地添加填充來下推內容對於響應式 Bootstrap 框架來說是不夠的。調整瀏覽器視窗大小時,頁面頂部和導覽列之間可能會出現間隙。

因此,建議採用更全面的方法:

body {
  padding-top: 60px;
}

@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
登入後複製

此 CSS 程式碼添加了 60px 頂部填充到正文,有效地將主要內容推到導覽列下方。但是,對於行動裝置或更小的螢幕尺寸(螢幕寬度小於 979 像素),頂部填充會被移除以避免重疊問題。

透過實施此解決方案,使用者可以確保導覽列保持固定在頂部頁面,但不再擾亂附近內容的觀看體驗。

以上是如何修復 Twitter Bootstrap 中導覽列阻止網站內容的問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板