引導程序的崩潰無效

Question

我已經使用引導程序編寫了此代碼，以使用折疊菜單。

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

引導程序的崩潰無效

問題描述

2 個解決方案

解決方案1
1 已采納 2013-06-20 10:09:40

解決方案2
0 2013-06-20 10:09:02

引導程序的崩潰無效

問題描述

2 個解決方案

解決方案1 1 已采納 2013-06-20 10:09:40

解決方案2 0 2013-06-20 10:09:02

解決方案1
1 已采納 2013-06-20 10:09:40

解決方案2
0 2013-06-20 10:09:02