Bootstrap 4 导航栏固定在内容上方
我正在使用 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.
相关文章