Question

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

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

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

这也是我的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在移动设备上运行良好。

先谢谢！

Answer 1

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

body {
   padding-top: 56px;
}

来自Bootstrap docs ..

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Bootstrap 4 Nav Bar固定顶部内容

3 个答案: