Question

我使用bootstrap创建了一个简单的导航栏但是当我点击它时，它没有显示列表项，它在更大的屏幕上工作正常。我尝试了很多替代方案，但它不起作用。

<html>
    <head>
        <meta charset = "utf8">
        <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
        <meta name = "viewport" content = "width = device-width initial-scale = 1">

        <link rel = "stylesheet" type = "text/css" href = "conFusion/css/bootstrap.min.css">
        <link rel = "stylesheet" type = "text/css" href = "conFusion/css/bootstrap-theme.min.css">
    </head>
    <body>
        <nav class = "navbar navbar-inverse" role = "navigation">

            <div class = "container">
                <div class = "navbar-header">
                    <button type = "button" class = "navbar-toggle collapsed"
                            data-toggle = "collapse" data-target = "#navbar" area-controls = "navbar" 
                            aria-expanded="false">
                        <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">Indore Medical</a>
                </div>
                <div id = "navbar" class = "navbar-collapse collapse">
                    <ul class = "nav navbar-nav">
                        <li class = "active"><a href = "#">Main-Course</a></li>
                        <li><a href = "#">Starters</a></li>
                        <li><a href = "#">Desert</a></li>
                        <li><a href = "#">About-us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
</html>

Answer 1

考虑到您提供的代码，似乎您还没有包含 jQuery 库文件，并且 Bootstrap的JavaScript需要jQuery 来运行其 JS / jQ 事件，如切换菜单等。

代码段

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">

  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" area-controls="navbar" aria-expanded="false">
        <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">Indore Medical</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Main-Course</a>
        </li>
        <li><a href="#">Starters</a>
        </li>
        <li><a href="#">Desert</a>
        </li>
        <li><a href="#">About-us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

导航栏不能在小屏幕上工作

1 个答案:

代码段