Question

我是一名平面设计师，几周前开始编码，希望能够进入前端。我正在建立的这个示例网站没有在导航栏区域进行合作。我在所有桌面视图中都很好地设置了它，但是当它崩溃时，我似乎无法让它工作。它不会展开或显示菜单项。我查找了所有可能的内容，但我只是遇到了同样问题的不同类型的导航栏。我正在使用Brackets。

任何帮助都是值得赞赏的，即使你看到一些与我无关的东西也是如此。

谢谢！

这是我的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

Answer 1

您必须添加bootstrap js和jquery min 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>

Bootstrap导航栏未展开或显示菜单项

1 个答案: