javascript - Bootstrap 固定菜单隐藏内容

Question

我在我的网页中使用 Bootstrap 固定菜单，但是菜单栏隐藏了页面的一些内容，特别是当屏幕尺寸减小时，响应式菜单将隐藏更多内容。

代码示例:

<nav class="navbar navbar-inverse navbar-fixed-top" style ="background:#141414">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand navbar-left" href="#" style="font-family:'Adobe Arabic';font-size:xx-large; font-weight:bold;"><?php  echo $strMnuBrand; ?>
      	</a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li class="active" ><a href="#" style="background:#ff6600; color:#e7e7e7; font-weight:bold;"><?php echo $strMnuHome ?></a></li>
      <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage1 ?></a></li>
      <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage2 ?></a></li> 
    
    </ul>

...等等我应该怎么做才能使固定菜单不隐藏页面内容，并且页面保持响应？

注意:我在 SO 中搜索了解决方案，但没有人适合我!

Answer 1

如果您使用顶部固定的导航栏，您需要添加等于导航栏高度的顶部填充 + 一点填充到您的 body 。像这样:

body {
  padding-top: 70px;
}

确保在核心 Bootstrap CSS 之后包含它。