Bootstrap 4 导航栏固定在内容上方 [英] Bootstrap 4 Nav Bar fixed-top over content

问题描述

我正在使用 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 导航栏固定在内容上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！