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）

回答

相关问题