Bootstrap固定菜单隐藏内容

  • Z时代
  • 2024-01-10
  • 分类：问答

我在我的网页中使用引导固定菜单，但菜单栏隐藏了页面的一些内容，特别是当屏幕尺寸减小时，响应菜单将隐藏更多内容。代码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; ?>  
     \t </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>

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

注：我搜索了解决方案，但没有人为我工作！

回答：

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

body { 
    padding-top: 70px; 
}

请确保在核心Bootstrap CSS后包含此项。

回答：

当屏幕尺寸缩小时，下面的代码将不会隐藏任何菜单项，并且也会响应并显示所有屏幕尺寸的菜单项。

你可以看到它在行动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固定菜单隐藏内容 的全部内容， 来源链接： utcz.com/qa/262089.html

回到顶部