javascript - Flask bootstrap 中的 scrollspy 不起作用(Jinja2)

标签 javascript python twitter-bootstrap-3

我一直在尝试 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 模板有关。

最佳答案

刚刚也遇到了这个问题。 bootstrap 的 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 %}

将 Bootstrap 示例的内容放入该文件中,它应该可以工作。 Bootstrap 示例指向此文件:http://getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css .

希望对您有所帮助。

关于javascript - Flask bootstrap 中的 scrollspy 不起作用(Jinja2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34902727/

相关文章:

python - 如何通过 Python 获取特定类别的平均值

html - Bootstrap with ASP.net 不使用全屏

css - 具有静态宽度的 Bootstrap 表单内联 DropDownLists

javascript - 需要指导尝试使用 Node js 设置带有 strip 的可变数量

javascript - 比较 JavaScript 中的数组值

javascript - Angular 路由多选项卡

python - 无法导入 moviepy.editor

javascript - JSF/PrimeFaces ajax 更新打破了 jQuery 事件监听器函数绑定(bind)

python - Pipfile 和 Pipfile.lock 如何使用?

twitter-bootstrap-3 - React Bootstrap 工具提示,如何触发它?