php – Bootstrap 4 Nav Bar固定顶部内容

我正在使用bootstrap4固定顶部导航栏,它在普通浏览器中工作正常.

但是,当我在移动设备上测试(Galaxy S5使用chrome dev选项)时,内容从导航栏开始,我在我的css中尝试了一些填充,但我似乎无法让它正常工作.

下面是HTML和CSS的jsfiddle,页面内容从固定顶部导航栏开始.

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下开始的最佳方式,该NAVBAR在移动设备上运行良好.

提前致谢！

解决方法:

建议的方法是在BODY上填充顶部,与导航栏的高度相同…

body {
   padding-top: 56px;
}

来自Bootstrap文档..

“Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.”

标签：html,php,css,navbar,bootstrap-4
来源： https://codeday.me/bug/20191001/1840134.html