引导导航栏不会展开或显示菜单项-前端问题

Bootstrap navbar isn#39;t expanding or showing menu items(引导导航栏不会展开或显示菜单项)

本文介绍了引导导航栏不会展开或显示菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是一名平面设计师，几周前开始编写代码，希望能进入前端领域。我正在建设的这个样本网站不在导航栏区域进行合作。我在我所有的桌面视图中都很好地设置了它，但当它折叠时，我似乎无法让它工作。它不会展开或显示菜单项。我找了所有我能找的，但我只是找到了不同类型的酒吧，都有同样的问题。我正在使用方括号。

我们非常感谢您的任何帮助，即使您看到一些与我搞砸了无关的事情。

谢谢！

这是我的html

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>loot</title>
    <meta name="description" content="fast and personal messenger delivery service">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div  class="container">
        <div  class="jumbotron header">
        </div>
    </div>
    <div class="container">
        <nav class = "navbar navbar-default navbar-right" role = "navigation">
           <div class = "navbar-header">
              <button type = "button" class = "navbar-toggle" 
                 data-toggle = "collapse" data-target = "#example-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>

           <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
              <ul class = "nav navbar-nav">
                 <li class = "active"><a href = "#">Home</a></li>
                 <li><a href = "#">About</a></li>
                 <li><a href= "#">Merch</a></li>
                 <li><div class="btn btn-primary">Schedule a pickup</div></li>
                 <li><div class="btn btn-success">Schedule a delivery</div></li>
              </ul>

           </div>
        </nav>
    </div>
</body>

和我的css

.header {
    background-color: #46B4CE !important;
    background:  url(images/loot-whiteArtboard%201@0.75x.png) no-repeat center center;
    background-size: 30%;
    position: relative;
    margin-top: 25px;
    height: 20em;
}

/*extra small devices*/
@media (min-width: 300px) {
  .header {
    background-size: 55%;
    height: 15em;
  }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .header {
        background-size: 40%;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .header {
        background-size: 30%;
    }
}

.btn{
    margin-left:10px;
    margin-top:8px;
}

.navbar {
    margin-top: -30px;
}

fullscreen view of site

mobile view not able to be expanded

推荐答案

您必须将引导js和jQuery min js添加到Work NAV菜单中。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

  .header {
    background-color: #46B4CE !important;
    background:  url(images/loot-whiteArtboard%201@0.75x.png) no-repeat center center;
    background-size: 30%;
    position: relative;
    margin-top: 25px;
    height: 20em;
}

/*extra small devices*/
@media (min-width: 300px) {
  .header {
    background-size: 55%;
    height: 15em;
  }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .header {
        background-size: 40%;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .header {
        background-size: 30%;
    }
}

.btn{
    margin-left:10px;
    margin-top:8px;
}

.navbar {
    margin-top: -30px;
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>loot</title>
    <meta name="description" content="fast and personal messenger delivery service">
    <!-- <link rel="stylesheet" href="main.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
    <div  class="container">
        <div  class="jumbotron header">
        </div>
    </div>
    <div class="container">
        <nav class = "navbar navbar-default navbar-right" role = "navigation">
           <div class = "navbar-header">
              <button type = "button" class = "navbar-toggle" 
                 data-toggle = "collapse" data-target = "#example-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>

           <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
              <ul class = "nav navbar-nav">
                 <li class = "active"><a href = "#">Home</a></li>
                 <li><a href = "#">About</a></li>
                 <li><a href= "#">Merch</a></li>
                 <li><div class="btn btn-primary">Schedule a pickup</div></li>
                 <li><div class="btn btn-success">Schedule a delivery</div></li>
              </ul>

           </div>
        </nav>
    </div>
</body>

这篇关于引导导航栏不会展开或显示菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！