Question

我一直在这里搜索电路板，似乎没有什么可以解决可能出错的问题。我的导航栏一切都很好但是当我移动时没有汉堡包或菜单出现。我尝试过改变组合并实现不同的崩溃名称，但无济于事。有任何想法吗？这是我的代码：

     <header class="navbar navbar-custom" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
   </div>
   <nav class="collapse navbar-collapse" role="navigation">
            <ul class="nav navbar-nav pages">
                <li class="page"><a href="item1.html">item1</a></li>
                <li class="page"><a href="item2.html">item2</a></li>
                <li class="page"><a href="item3.html">item3</a></li>
                <li class="page hidden-xs"><a href="item1.html"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></a></li>
                <li class="page"><a href="item4.html">item4</a></li>
                <li class="page"><a href="item5.html">item5</a></li>
                <li class="page"><a href="item6.html">item6</a></li>
            </ul>
        </div>
    </div>
</header>

Answer 1

检查头部中是否有元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

此外，您的导航标记在ul元素后没有关闭。检查您的代码隐藏

我认为必须更换</div>之后的</ul>

Answer 2

在原始代码中，有一个关闭导航的div。当我格式化这个网站时发生了这种情况。在原始版本中，它由nav标签关闭。我忘了包括标题集。他们在这里：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ >
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
    <script src="https://use.fontawesome.com/8633c13aa3.js"></script>
</head>

Answer 3

当你最小化屏幕时你应该检查水平滚动。这是你的内容没有完全响应的原因之一，当你最小化屏幕时，滚动水平出现并且汉堡包图标没有出现......

首先删除所有内容，期望在您的页面上导航，然后最小化屏幕。如果问题仍然存在，那么您还应检查您的背景颜色和颜色是否发生变化..

汉堡和下拉没有显示在移动与Bootstrap导航栏

3 个答案: