烧瓶引导程序中的scrollspy不起作用（Jinja2）

Question

I've been trying all the fixes available here in SO, but it hasn't solved my problem yet. 我一直在尝试SO此处提供的所有修复程序，但尚未解决我的问题。

Here's my current code (HTML): 这是我当前的代码（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: 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 %}

Any ideas appreciated :) 任何想法表示赞赏:)

Update: 更新：

I've tried using a plain version (all pure html, css and js) and it works fine. 我尝试使用普通版本（所有纯html，css和js），并且工作正常。 The bug might have something to do on Flask's Jinja2 templating. 该错误可能与Flask的Jinja2模板有关。

Answer 1

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. 引导程序显示的navbar-fixed-top示例使用了一个额外的CSS文件“ navbar-fixed-top.css”，只需检查示例中的源即可。 This is missing in the flask bootstrap base.html template. 在flask bootstrap base.html模板中缺少此属性。 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 : 我只是在我的flask_bootstrap模板中添加了一个“自定义” css文件，如下所示：

{% 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 . 引导程序示例指向此文件： http : //getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css 。

Hope that helps. 希望能有所帮助。

烧瓶引导程序中的scrollspy不起作用（Jinja2）

问题描述

1 个解决方案

解决方案1
2 2016-04-03 21:42:15

烧瓶引导程序中的scrollspy不起作用（Jinja2）

问题描述

1 个解决方案

解决方案1 2 2016-04-03 21:42:15

解决方案1
2 2016-04-03 21:42:15