![](/img/trans.png)
[英]Bootstrap Scrollspy not working: Scrollspy is not a function
[英]scrollspy in flask bootstrap not working (Jinja2)
我一直在尝试SO此处提供的所有修复程序,但尚未解决我的问题。
这是我当前的代码(HTML):
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<body class="scroll-area" data-spy="scroll" data-target="#spy" data-offset="0">
{% block navbar %}
<div >
<div id="spy" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" href="#section1">Home</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#section2">Who Am I</a></li>
<li><a href="#section3">What I Can Do For You</a></li>
<li><a href="#section4">Contact Me</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><span class="glyphicon glyphicon-user"></span>Test</a></li>
<li><a href="/"><span class="glyphicon glyphicon-log-in"></span>Testing</a></li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
JavaScript部分:
{% block script %}
{{super()}}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
{% endblock %}
任何想法表示赞赏:)
更新:
我尝试使用普通版本(所有纯html,css和js),并且工作正常。 该错误可能与Flask的Jinja2模板有关。
刚遇到这个问题。 引导程序显示的navbar-fixed-top示例使用了一个额外的CSS文件“ navbar-fixed-top.css”,只需检查示例中的源即可。 在flask bootstrap base.html模板中缺少此属性。 我一直在寻找可能提供此功能的导入文件,但没有看到它。 我只是在我的flask_bootstrap模板中添加了一个“自定义” css文件,如下所示:
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='css/navbar-fixed-top.css')}}">
{% endblock %}
将引导程序示例的内容放入该文件中,它应该可以工作。 引导程序示例指向此文件: http : //getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css 。
希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.