navbar不能在移动网络应用程序工作

Question

我有一个简单的页面滚动nabber。它在桌面上工作，但当我在移动web应用程序中查看它时，它甚至不显示菜单或切换导航。我相信我错过了一些关于移动视图的东西，但不确定。我检查了堆栈溢出的帖子，但没有帮助。请参考以下

<nav class="navbar navbar-default navbar-fixed-top" 
style="background-color: #757470; padding-left: 0px; margin: 0px; height: 64px;"> 
<div class="container" id="menu"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
      data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" 
     id="bs-example-navbar-collapse-1" 
     style="font-family: Lato; font-size: 12px;" class="gatewayNav"> 
     <ul class="nav navbar-nav" 
      style="padding-top: 0px; padding-left: 0px;"> 
      <li><div style="" class="gatewayLogo"></div> 
       <h1 style="padding-left: 200px;"></h1></li> 
      <li class="dropdown"><a data-toggle="tab" href="#home" 
       id="homeMenu" prevent-default="" scroll-to="home" 
       style="border: medium none; padding-top: 10px; padding-bottom: 0px;"><b 
        style="color: white; font-size: 13px;">HOME</b><br> </a></li> 
      <li class="dropdown"><a data-toggle="tab" href="#startups" 
       prevent-default="" scroll-to="startups" 
       style="border: medium none; padding-top: 10px; padding-bottom: 0px; color: white;" 
       id="startupMenu"><b style="color: white; font-size: 13px;">STARTUPS</b> 
        <br> </a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

导航栏的代码片段首先确保你第一次加载jQuery和那之后引导的JavaScript。如果你有这些正确加载，那么你的问题可能是几个不同的问题。一个是，如果你没有看到切换按钮，你可能会有一些自定义的css作为你的切换按钮，使它没有边界或者这种效果。如果没有按钮中的<span class="icon-bar"></span>元素，您可能看不到切换按钮。接下来我看到的是你有一个为导航栏设置的高度。如果您看到切换按钮，并且点击它后，您看不到下拉菜单，因为您有白页。您可能需要考虑添加填充以获得所需的高度，而不是给它一个高度。

这里是你的导航工作的小提琴。我添加了7px的顶部和底部填充，因为引导程序3的导航栏是50px，因此要获得64px，您只需在顶部和底部添加7。然后我将图标栏添加到切换按钮，以便您可以看到它。就像我说的，但请确保您先加载jquery，然后再启动js文件。这里是小提琴演示JsFiddle Navbar Fix

PS，如果你不打算为每个在你的导航栏你<li>元素的下拉菜单则没有理由下拉类添加到<li>。当你点击你的链接并且所有的分页符和奇怪的填充都可能导致一些问题时，你也将切换选项卡或滚动到一个部分。请在这个答案后留下评论，这样我就能理解你所要达到的目标，因为看起来你对这个标记有很多相互冲突的问题，我只是想了解你正在尝试做什么也许我可以帮忙。