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

如果您使用的是顶部固定的导航栏，则需要添加等于导航栏高度的顶部填充+一些填充到您身体的位置。像这样：

test_

确保在核心Bootstrap CSS之后包含此内容。

Answer 2

以下代码在屏幕尺寸减小时不会隐藏任何菜单项，也会响应并显示所有屏幕尺寸的菜单项。

您可以在行动here

中看到它

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Brand Name</a>
    </div>
    <div class="" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap固定菜单隐藏内容

2 个答案: