0

我已经使用引导程序编写了这段代码来使用折叠菜单。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Up and Running with Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>

<nav class="navbar navbar-inverse">
    <div class="navbar-inner">
    <a class="brand" href="#">Roux Academy Conference</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a> </li>
      <li><a href="#">The Artists</a></li>
      <li><a href="#">The Art</a></li>
      <li><a href="#">Schedule</a></li>
      <li><a href="#">Venue</a></li>
      <li><a href="#">Hotels</a></li>
    </ul>
    </div>
</nav>


    <script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

此代码必须在调整浏览器窗口大小时折叠列表项，但它在任何浏览器（FF、Chrome 或 IE）中都不起作用。

提前谢谢。

4

2 回答 2

1

没有使用正确的 HTML 来使导航栏响应。

我使用了来自http://twitter.github.io/bootstrap/components.html#navs的代码，并制作了：

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
  <div class="container">
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>

    <a class="brand" href="#">Roux Academy Conference</a>
    <div class="nav-collapse collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a> </li>
        <li><a href="#">The Artists</a></li>
        <li><a href="#">The Art</a></li>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">Venue</a></li>
        <li><a href="#">Hotels</a></li>
      </ul>
    </div>
  </div>
</div>
</nav>

只要链接了必要的 JS/CSS，这就会产生所需的行为。

工作代码在这里：http ://codepen.io/hwg/pen/gFLfz （FF，仅限Chrome？）

或在这里： http: //www.bootply.com/65033（也有 IE）

于 2013-06-20T10:09:40.257 回答
0

您的 html 中有一些错误..

添加此折叠菜单：

<div class="nav-collapse collapse">

将此添加为折叠菜单按钮

        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
            </span>
        </button>

请试试这个：

<head >
    <title></title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="navbar-inner">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                </span>
            </button>
            <a class="brand" href="#">Roux Academy Conference</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a> </li>
                    <li><a href="#">The Artists</a></li>
                    <li><a href="#">The Art</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Venue</a></li>
                    <li><a href="#">Hotels</a></li>
                </ul>
            </div>
        </div>
    </nav>
  <script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
于 2013-06-20T10:09:02.720 回答