問題描述

我正在使用 bootstrap4 固定頂部導航欄，它在普通瀏覽器中運行良好.

I'm using bootstrap4 fixed-top navbar which works fine in normal browser.

但是，當我在移動設備(使用 chrome dev 選項的 Galaxy S5)上測試時，內容從導航欄后面開始，我在我的 css 中嘗試了一些填充，但我似乎無法讓它正常工作.

However, when I test on a mobile device (Galaxy S5 using chrome dev options) the content starts behind the nav bar, I've tried some padding in my css but I can't seem to get it to work correctly.

下面是 HTML 和 CSS 的 jsfiddle，頁面內容從固定頂部導航欄后面開始.

Below is a jsfiddle of the HTML and CSS, the page content starts behind the fixed-top nav bar.

https://jsfiddle.net/8kefh4u7/6/

這里也是我的 CSS

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.epg-container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background-color: black;
}
.epg-container ul.listings-grid {
  list-style-type: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  background-color: #262626;
}
.epg-container ul.listings-grid li {
  font-size: 20px;
  text-align: left;
}
.epg-container ul.listings-grid .listings-channel-row {
  height: auto;
  padding: 0;
  border-bottom: solid;
  border-bottom-width: 6px;
  border-color: #262626;
  overflow: hidden;
}
.epg-container ul.listings-grid .listings-channel {
  /*  color not necesary  */
  color: white;
  width: 20%;
  height: 83px;
  float: left;
  text-align: center;
}
.epg-container ul.listings-grid .listings-channel img {
  max-width: 100%;
  max-height: 100%;
}
.epg-container ul.listings-grid .listings-program {
  color: #989898;
  border-right: solid;
  border-right-width: 3px;
  border-left: solid;
  border-left-width: 3px;
  border-color: #262626;
  float: left;
  padding: 10px 10px;
  background-color: black;
}
.epg-container ul.listings-grid .listings-details-now-info {
  color: #fa9609;
  font-size: 12px;
}
.epg-container ul.listings-grid .listings-details-next-info {
  color: #fa9609;
  font-size: 12px;
}

讓內容頁面始終在 NAVBAR 下開始并在移動設備上運行良好的最佳方式是什么.

What would be the best way to make the content page always start under the NAVBAR that would work well on mobile.

推薦答案

我修復了這個問題，所以現在內容總是在固定的導航欄之后開始.

I fixed this so now the content will always start after the fixed nav bar.

我將以下內容添加到正文 css

I added the below to the body css

min-height: 51.5rem;
padding-top: 2.5rem;

感謝@ZimSystem 為我指明了正確的方向.

Thank you @ZimSystem for pointing me in the right direction.

這篇關于Bootstrap 4 導航欄固定在內容上方的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！