Bootstrap 4 Nav Bar固定顶部内容

时间:2018-03-04 22:28:16

标签: php html css bootstrap-4 navbar

我正在使用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在移动设备上运行良好。

先谢谢!

3 个答案:

答案 0 :(得分:4)

推荐的方法是BODY上的padding-top,与导航栏的高度相同......

body {
   padding-top: 56px;
}

来自Bootstrap docs ..

  

“固定导航栏使用位置:固定,意味着它们从DOM的正常流程中拉出,可能需要自定义CSS(例如,填充顶部)以防止与其他元素重叠。”

答案 1 :(得分:2)

使用固定量的标头高度将padding-top引入body元素是不可靠的。刷新页面后,我将使用这段代码将正文设置为正确的高度。

        $("body").css({'padding-top': $('nav.navbar').height()});

导航栏是通过nav类的navbar元素来标识的。

答案 2 :(得分:-1)

我修复此问题,现在内容将始终在固定导航栏后启动。

我将以下内容添加到了身体css

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

感谢@ZimSystem指出我正确的方向。