Bootstrap 汉堡包导航栏未打开

Question

我将 bootstrap 导航栏添加到我的页面，但是当我缩小 window 并单击汉堡包图标时，我的菜单菜单没有出现。有什么问题？我真的没看到它...我相信我把 bootstrap.js 放在了正确的位置，所以我猜它应该可以工作。

    <html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download - CodeName</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="css/styles.css" rel="stylesheet">
</head>


<div class="download-head">
    <!-- <div class="col-md-4" style="float: right;">
        <a href="#"><img src="images/eng-button.png" style="margin-top: 10px; float:right;" height="42" width="42"></a>
        <a href="#"><img src="images/dutch-button.png" style="margin-top: 10px; float: right;" height="42" width="42"></a>
    </div> -->

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">CodeName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav pull-right">
        <li class="active "><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>   
</div>
</div>

    <div class="download-box">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum semper ultrices. Ut dui mauris, semper eget vehicula id, vestibulum malesuada augue. In nec eros metus, eget laoreet justo. Quisque nec ligula in leo posuere pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse viverra, erat nec feugiat rutrum, elit lectus adipiscing nibh, vel dapibus orci sapien ut nunc. Quisque est nisi, facilisis quis molestie non, convallis nec diam. Suspendisse cursus justo mi, et ultricies dolor. Sed semper imperdiet sodales. Integer congue elit non nunc accumsan laoreet. Curabitur dignissim molestie turpis, ut condimentum magna euismod eu. Nam hendrerit sodales leo. Maecenas iaculis ornare magna nec gravida. Nulla interdum sapien eget tortor sodales venenatis. Phasellus hendrerit iaculis urna id laoreet. Nam placerat, nunc sed feugiat pretium, mi mi accumsan urna, nec congue arcu diam eu est. Nam id orci dui, at vestibulum lorem. Pellentesque ac gravida mi. Proin condimentum mauris neque, in laoreet odio.  <a href="payment.html">koop een licentie</a><br /><br>
                </p>
                <form role="form">
                    <div class="row">
                            <div class="form-group col-lg-4">
                                    <input type="text" class="form-control" placeholder="Uw naam">
                            </div>
                            <div class="form-group col-lg-4">
                                    <input type="email" class="form-control" placeholder="Uw mailadres">
                            </div>
                            <!--
                            <div class="form-group col-lg-4">
                                    <input type="tel" class="form-control" placeholder="Uw telefoonnummer">
                            </div>
                            -->
                            <div class="clearfix"></div>
                            <div class="form-group col-lg-12">
                                    <textarea class="form-control" rows="6" placeholder="Bericht"></textarea>
                            </div>
                            <div class="form-group col-lg-12">
                                    <input type="hidden" name="save" value="contact">
                                    <!--<button type="submit" class="btn btn-success">Koop licentie</button> -->
                                    <button type="submit" class="btn btn-success pull-right">Verstuur bericht</button>
                            </div>
                    </div>
                </form>      
        </div>
        </div>
    </div>

<div class="page-footer">
    <div class="row">
        <div class="col-md-7 pull-left">
            <table id="footer-table" border="0">
                <tr>
                    <td>KvK:</td>
                    <td>0123457</td>
                </tr>
                <tr>
                    <td>BTW:</td>
                    <td>NL.1234.12.123.B.12</td>
                </tr>
                <tr>
                    <td>IBAN:</td>
                    <td>NL43ABNA0621580000</td>
                </tr>
                <tr>
                    <td>BIC:</td>
                    <td>ABNANL2A</td>
                </tr>
            </table>
        </div>
        <div class="col-md-5">
            <table id="footer-table" border="0">
                <tr>
                    <td valign="top">Adres:</td>
                    <td>HeDaarStraat 22 <br> 1324 AB Rotterdam</td>
                </tr>
                <tr>
                    <td>Tel:</td>
                    <td>+ 31 6 12 34 56 52</td>
                </tr>
                <tr>
                    <td>Mail:</td>
                    <td>contact@trrr.nl</td>
                </tr>
            </table>
        </div>
    </div>
</div>
</div>

<div class="footer navbar-fixed-bottom">
    <a href="#"><img src="images/powered-fix-ict.png" style="margin-bottom: 10px; margin-right: 10px; float:right;"></a>
</div>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js "></script>    

</body>
</html>

Answer 1

您似乎没有加载 jQuery。通过 Bootstrap 脚本之前的脚本标记添加它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

将来，检查您的控制台作为故障排除的第一站，post您在问题中看到的内容。

Bootstrap 汉堡包导航栏未打开

Bootstrap hamburger navbar is not opening

jquery

navbar

twitter-bootstrap