Question

我的导航按钮不会展开以显示导航按钮。这是我的整个代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Restorant Con fusion</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/mystyle.css">
</head>

<body>

以下是无效的块的开头：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">

    <div class="navbar-header">

       <button type="button" class="navbar-toggle collapsed" data-        toggle="collapse" data-target="#navbar" aria-expanded="false" aria-  controls="navbar">
          <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="#">Restorante Con Fusion</a>

    </div>

    <div id="navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Menu</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign in</a></li>
          <li><a href="#">Contact</a></li>
       </ul>
    </div>

  </div>
</nav>

这是问题块的结束。

<header class="jumbotron">

    <!-- Main component for a primary marketing message or call to action -->

    <div class="container">
        <div class="row row-header">
            <div class="col-xs-12 col-sm-8">
                <h1>Ristorante con Fusion</h1>
                <p style="padding:40px;"></p>
                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
            </div>
            <div class="col-xs-12 col-sm-4">
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="row row-content">
        <div class="col-xs-12 col-sm-3 col-sm-push-9">
            <p style="padding:20px;"></p>
            <h3 align=center>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-pull-3">
            <h2>Uthappizza</h2>
            <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
            <p><a  href="#">More &raquo;</a></p>
        </div>
    </div>


    <div class="row row-content">
        <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
            <h3 align=center>This Month's Promotions</h3>
        </div>
        <div class="col-xs-12 col-sm-9">
            <h2>Weekend Grand Buffet</h2>
            <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
            <p><a href="#">More &raquo;</a></p>
        </div>
    </div>

    <div class="row row-content">
        <div class="col-xs-12 col-sm-3 col-sm-push-9">
            <p style="padding:20px;"></p>
            <h3 align=center>Meet our Culinary Specialists</h3>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-pull-3">
            <h2>Alberto Somayya</h2>
            <h4>Executive Chef</h4>
            <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
            <p><a href="#">More &raquo;</a></p>
        </div>
    </div>
</div>

<footer class="row-footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-5 col-sx-offset-1 col-sm-2 col-sm-offset-1">
                <h5>Links</h5>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-xs-6 col-sm-5">
                <h5>Our Address</h5>
                <address>
                  121, Clear Water Bay Road<br>
                  Clear Water Bay, Kowloon<br>
                  HONG KONG<br>
                  Tel.: +852 1234 5678<br>
                  Fax: +852 8765 4321<br>
                  Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
               </address>
            </div>
            <div class="col-xs-12 col-sm-4">
                <div style="padding: 40px 10px;">
                    <a href="http://google.com/+">Google+</a>
                    <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                    <a href="http://www.linkedin.com/in/">LinkedIn</a>
                    <a href="http://twitter.com/">Twitter</a>
                    <a href="http://youtube.com/">YouTube</a>
                    <a href="mailto:">Mail</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12">
                <p style="padding:10px;"></p>
                <p align=center>Â© Copyright 2015 Ristorante Con Fusion</p>
            </div>
        </div>
    </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.mim.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

所以有两个问题：

1）你在jQuery中包含了一个拼写错误：jquery.mim.js

2）确保您的下拉按钮上的data-toggle="collapse"没有像您的示例那样有大的空白区域。

例如：data- toggle="collapse"

进行这些更改，只要你的bootstrap css和js正确加载，一切都应该有效。

要测试下拉菜单导航，请确保将浏览器窗口的大小缩小为移动设备尺寸，然后您会看到“汉堡包”。菜单图标。

我的导航按钮不会展开并显示导航按钮

1 个答案: