引导程序导航无法在响应模式下工作

时间:2015-10-18 12:34:34

标签: twitter-bootstrap-3 uinavigationbar

我有这段代码,它在响应模式下无效。我的意思是按钮会出现,但是当我点击按钮时,我的导航栏就不会出现了。我不知道它是什么。 css和js文件也被添加到文档中,但它仍然无法正常工作。任何有关此问题的提示都会受到赞赏。

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<!-- ------------------------------bootstrap css link--------------------- -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/custom-css.css">

</head>
<body>



    <div class="row">
        <div class="col-md-12 top-site">

                <div class="top-bg col-md-12">
                </div>

                <!-- <div class="col-md-2 social">


                </div>
                <div class="col-md-2 search">

                </div> -->

                <div class="row">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="">خانه</a></li>
                                <li><a href="">تماس با ما</a></li>
                                <li><a href="">لینک به ما</a></li>
                                <li><a href="">درباره ما</a></li>
                                <li><a href="">تبلیغات در سایت</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>


        </div>
    </div>

<div class="container"> 
    <div class="row">
    </div>

</div>



<!-- ------------------------------bootstrap css link--------------------- -->
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="npm.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>

</body>
</html> 

1 个答案:

答案 0 :(得分:1)

jQuery库应该包含在之前 bootstrap。

<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>