Question

我将自举导航栏添加到了我的页面，但是当我缩小窗口并点击汉堡包图标时，我的菜单菜单没有下降。有什么问题？我认真地看不到它...我相信我把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>

将来，请将您的控制台作为故障排除的第一站，并发布您在问题中看到的内容。

Bootstrap汉堡包导航栏没有打开

1 个答案: