簡體   English   中英

燒瓶引導程序中的scrollspy不起作用(Jinja2)

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM