scrollspy在燒瓶bootstrap不工作（Jinja2）

我一直在嘗試所有可用的修復在這裏，但它還沒有解決我的問題呢。scrollspy在燒瓶bootstrap不工作（Jinja2）

這裏是我當前的代碼（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模板可能有些問題需要解決。

來源

2016-01-20 angbargas

剛剛遇到了這個問題。看來引導程序的navbar-fixed-top示例使用額外的css文件「navbar-fixed-top.css」，只需在示例中檢查源代碼。這在flask bootstrap base.html模板中缺少。我正在尋找可能提供它的導入，但沒有看到它。我只是增加了一個「自定義」 css文件到我的flask_bootstrap模板是這樣的：

{% 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。

希望有所幫助。

來源

2016-04-03 21:42:15 raugustinus

scrollspy在燒瓶bootstrap不工作（Jinja2）

回答

相關問題