导航栏在移动web应用程序中不起作用

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，然后再加载bootstrap的javascript。如果你正确地加载了这些，那么你的问题可能是几个不同的问题。一种情况是，如果您没有看到切换按钮，您可能会为切换按钮提供一些自定义css，使其没有边框或其他类似效果。如果按钮中没有<span class="icon-bar"></span>元素，您可能看不到切换按钮。我看到的下一件事是您为导航栏设置了高度。如果你看到的是切换按钮，点击后你看不到下拉列表，因为你有一个白色的页面。您可能想要考虑添加填充以获得所需的高度，而不是给它一个高度。

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

PS如果您的导航栏中没有每个<li>元素的下拉菜单，那么就没有理由在<li>中添加下拉类。另外，当你点击你的链接时，你是不是要切换一个标签或滚动到一个部分，所有的分页符和奇怪的填充可能会导致一些问题。请在此答案后留下评论，这样我就可以理解您试图通过所有这些来实现什么，因为看起来您在整个标记中有很多相互冲突的问题，而我只是想了解您正在尝试做什么，所以也许我可以提供帮助。