Question

我已使用bootstrap编写此代码以使用折叠菜单。

<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）中都不起作用。

提前完成。

Answer 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也是）

Answer 2

你的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>

bootstrap崩溃不起作用

2 个答案: