2016-01-20 3 views
1

Я пробовал все исправления, доступные здесь, в SO, но он еще не решил мою проблему.scrollspy in flask 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 %} 

Любые идеи оценили :)

Update:

Я попытался с помощью (все чистые html, css и js), и он отлично работает. Ошибка может иметь что-то делать с шаблоном Jinja2 от Flask.

ответ

2

Просто столкнулся с этой проблемой. Похоже, что пример navbar-fixed-top из bootstrap использует дополнительный файл css «navbar-fixed-top.css», просто проверьте источник в примере. Это отсутствует в шаблоне base.html bootstrap. Я искал импорт, который мог бы его предоставить, но не видел. Я просто добавил «пользовательский» файл 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.

Надеюсь, что это поможет.

Смежные вопросы