Question

我有一个简单的nabber页面滚动。它适用于桌面，但当我在移动网络应用程序中查看它时，它甚至不显示菜单或切换导航。我确信我在移动视图方面缺少一些东西，但不确定。我从堆栈溢出检查了几个帖子，但没有帮助。请参阅下面的导航栏代码段

<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>。当您单击链接时，您还将切换选项卡或滚动到某个部分，并且所有分页符和奇怪的填充可能会导致某些问题。请在这个答案之后发表评论，这样我就可以理解你想要实现的目标，因为看起来你对整个标记存在很多相互矛盾的问题，而我只是想了解你要做的是什么也许我可以帮忙。

导航栏无法在移动网络应用中使用

1 个答案: