Bootstrap折叠不起作用,但在JSFiddle中工作

时间:2016-07-25 03:59:57

标签: javascript php html css twitter-bootstrap

我刚开始使用bootstrap并在尝试使用“Collapse”时遇到了一个问题。

我99%确定我正确链接了Javascript,因为对css的引用也有效。我也尝试用CDN替换它

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

但它仍然无效。

当我将我的代码放入JSfiddle以便在这里分享时,我测试了它,它从那里开始工作,我无法弄清楚原因。

以下是JSfiddle

要查找折叠按钮,只需缩小浏览器的大小,直到您看到右上角的3个条形图。这是在点击时显示导航其余部分的按钮。

其他说明:我使用的是codeigniter,这就是为什么你会在这段代码中看到一些PHP。

任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:6)

jquery.min.js

之前加入bootstrap.min.js
<head>
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.css'); ?>" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="<?php echo base_url('assets/js/bootstrap.js'); ?>" ></script> <!--Boostrap Javascript -->

</head>

Bootstrap JS需要JQuery才能工作,因此您需要在脚本标记中 bootstrap.min.js之前将其包含在内。