scrollspy in flask bootstrap not working (Jinja2)
Question
I've been trying all the fixes available here in SO, but it hasn't solved my problem yet.
Here's my current code (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 part:
{% 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 %}
Any ideas appreciated :)
Update:
I've tried using a plain version (all pure html, css and js) and it works fine. The bug might have something to do on Flask's Jinja2 templating.
1 answers
solution1
2 2016-04-03 21:42:15
Just ran into this issue as well. It appears the navbar-fixed-top example from bootstrap uses an extra css file "navbar-fixed-top.css", just check the source in the example. This is missing in the flask bootstrap base.html template. I was looking for the import that might provide it, but didn't see it. I just added a 'custom' css file to my flask_bootstrap template like this :
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='css/navbar-fixed-top.css')}}">
{% endblock %}
Put the contents of the bootstrap example in that file and it should work. The bootstrap example points to this file : http://getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css .
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.