Html 导航栏折叠在引导程序中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20537743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:26:41  来源:igfitidea点击:

navbar collapse not working in bootstrap

htmlcsstwitter-bootstrap

提问by novian kristianto

try to start learning about Bootstrap. i create little code to create responsive menu, like this

尝试开始学习 Bootstrap。我创建了一些代码来创建响应式菜单,就像这样

<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Application Name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>

my question is, why when i try to select menu in small browser, menu does not show ? can some one tell me why? thanks

我的问题是,为什么当我尝试在小浏览器中选择菜单时,菜单不显示?有人能告诉我为什么吗?谢谢

回答by nkmol

My geuss is that you didn't load jQuery. Place this in your header and see if it works:

我的猜测是你没有加载 jQuery。把它放在你的标题中,看看它是否有效:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Also i suggest to load the bootstrap js file also in the header, just afterthe jQuery library.

此外,我建议在 jQuery 库之后也在标题中加载 bootstrap js 文件。

回答by pederOverland

It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js

这很可能是因为 bootstrap.js 脚本依赖于 jQuery 来工作。尝试在 bootstrap.js 之前包含 jQuery

回答by DemPorkChops

Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.

不确定这是否有帮助,但我注意到在引导站点上它告诉您链接页脚中的 js 文件。

I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.

我还让 wordpress 将它们放在我的标题中,因为我必须将脚本放入我的 functions.php 文件中。一旦我删除了页脚中 jquery.js 文件和 bootstrap-min.js 的链接,导航按钮开始正确折叠。