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屋！