Question

重要提示：我在Stack Overflow上检查了类似的问题，但似乎没有解决我的问题：我确实包含了Bootstrap JS文件。 2.似乎我没有两次包含JS文件。 3.我删除了navbar-default类，因为我需要重新设置它（如教程中所示，见下文）。

我正在尝试使用Bootstrap导航栏切换按钮实现响应式菜单，如TutsPlus使用Bootstrap启动您的投资组合中所述。

缩小窗口时，文本菜单项会变成汉堡菜单按钮。

然而，当我点击汉堡菜单按钮时，没有任何反应。

以下是HTML代码：

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
<nav class="navbar">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Red Beluga</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="home.html">Home</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

这是CSS代码：

@import 'main.css';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);

html{
    background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
    height: 100%;
    background-position: fixed;
    overflow-y: scroll;
}

body{
    background: none;
    line-height: 1.5;
    color: #F5F5F5;
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Abril Fatface', cursive;
    margin-top: 0;
}

p {
    margin-bottom: 1rem;
}

.navbar-brand, .navbar-nav>li>a{
    color: #F5F5F5;
    font-weight: bold;
}

.navbar-brand:hover, .navbar-nav>li>a:hover{
    color: #F5F5F5;
    font-weight: bold;
    background: none;
}

.navbar-nav>li>a:after{
    content: '/';
    margin-left: 30px;
}

.navbar-nav>li:last-child>a:after{
    content: '';
}

.navbar-toggle{
    background: #111;
}

.navbar-toggle .icon-bar{
    background: #F5F5F5;
}

@media (max-width: 768px) {
    .navbar-nav>li>a:after{
    content: '';
}
    .navbar-nav>li>a{
        background: #111;
        border-radius: 4px;
        margin-bottom: 3px;
    }
}

知道为什么它不起作用。

Answer 1

您应该使用<script>标记来引用JS文件

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js">

不是<link>。这些是用于样式表。

<link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">

Bootstrap导航栏切换按钮不会折叠

1 个答案: