为什么我的分页引导样式不起作用？

我在练习“Flask Web Development”博客文章的时候分页链接分页，bootstrap样式不行。但其他的都可以使用。我是用宏导入的，希望其他地方可以常用这个。是否需要添加进口时间？。有人帮助我。为什么我的分页引导样式不起作用？

这是index.html的

{% extends "base.html" %} 
{% import "bootstrap/wtf.html" as wtf %} 
{% import '_macros.html' as macros %} 
{% block head %} 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
{% block scripts %} 
    {{ super() }} 
    <script type="text/javascript"> 
     $('[data-spy="scroll"]').each(function() { 
      var $spy = $(this).scrollspy('refresh') 
     }) 
    </script> 
{% endblock %}

{% block styles %} 
    {{ super() }} 
    <style type="text/css"> 
     body { 
      background-color: #ffffff; 
      /*background-color: #F0F0F0;*/ 
      position: relative; 
     } 

     .header { 
      background-color: #FFFFFF; 
      background-attachment: scroll, fixed; 
      background-position: top left, top left; 
      background-repeat: repeat, no-repeat; 
      background-size: auto, auto 100%; 
      color: rgba(255, 255, 255, 0.5); 
      height: 100%; 
      left: 0; 
      padding: 8em 4em 0 0; 
      position: fixed; 
      text-align: right; 
      top: 0; 
      width: 20%; 
      padding: 0 0 0 0; 
     } 

     .img { 
      background-color: #235F2A; 
      height: 23.6076%; 
      width: 61.8%; 
      margin-top: 14.5924%; 
      margin-left: 19.1%; 
      margin-right: 19.1%; 
      padding: 0 0 0 0; 
     } 

     .breadcrumb { 
      margin-left: 25.28%; 
      margin-top: 3%; 
      width: 68.33%; 
      background-color: #FFFF93; 
     } 

     .sketcho { 
      width: 83.7%; 
      background-color: #ffffff; 
      opacity: 1; 
      margin-left: 7.72%; 
      margin-top: 8.5%; 
     } 

     .container-fluid { 
      margin-left: 20%; 
      padding-left: 0px; 
      padding-right: 0px; 
     } 

     .sketch { 
      width: 83.7%; 
      background-color: #ffffff; 
      opacity: 1; 
      margin-left: 7.72%; 
      margin-top: 1%; 
     } 

     section { 
      padding-left: 17px; 
      padding-right: 17px; 
     } 

     .paging { 
      margin-left: auto; 
      text-align: center 
     } 

     .center { 
      margin-top: 320px; 
      height: 35px; 
     } 

     .row_button { 
      width: 35px; 
      height: 35px; 
      float: left; 
     } 
    </style> 
{% endblock %}

{% endblock %} 
{% block title %}Index{% endblock %} 


{% block page_content %} 
<body id="top"> 
<div class="container-fluid"> 
    {% for Article in Articles %} 
    <div class="row sketch"> 
     <section id="one"> 
      <header class="major"> 
       {{ Article.head }} 
      </header> 
      <p>{{ Article.body }}</p> 
      <ul class="actions"> 
       <li> 
        <button type="button" class="btn btn-info">Learn More</button> 
       </li> 
      </ul> 
    </div> 
    {% endfor %} 
    <div class="row paging"> 
     {{ macros.pageination_widget(pageination, '.index') }} 
    </div> 
</div> 

<script src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script> 
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script> 
</body> 
{% endblock %}

_macros.html

{% macro pageination_widget(pageination, endpoint) %} 
    <nav aria-label="Page navigation"> 
     <ul class="pageination"> 
      <li {% if not pageination.has_prev %} class="disabled" {% endif %}> 
       <a href="{% if pageination.has_perv %}{{ url_for(endpoint, page=pageination.page - 1, **kwargs) }}{% else %}#{% endif %}"> 
        &laquo;</a> 
      </li> 
      {% for page in pageination.iter_pages() %} 
       {% if page %} 
        {% if page == pageination.page %} 
         <li class="active"> 
          <a href="{{ url_for(endpoint, page=page, **kwargs) }}">{{ page }}</a> 
         </li> 
        {% else %} 
         <li><a href="{{ url_for(endpoint, page=page, **kwargs) }}">{{ page }}</a></li> 
        {% endif %} 
       {% else %} 
        <li class="disabled"><a href="#"></a></li> 
       {% endif %} 
      {% endfor %} 
      <li {% if not pageination.has_next %} class="disabled" {% endif %}> 
       <a href=" {% if pageination.has_next %}{{ url_for(endpoint,page=pageination.page + 1, **kwargs) }}{% else %}#{% endif %}">&raquo;</a> 
      </li> 
     </ul> 
    </nav> 
{% endmacro %}

来源

2017-09-26 GuoHuas Lu

好像你有你的类名拼写错误。

尝试<ul class="pagination">而不是<ul class="pageination">。

你可以找到完整的文档的类用在这里：

https://getbootstrap.com/docs/3.3/components/#pagination-default

来源

2017-09-28 13:51:42

为什么我的分页引导样式不起作用？

回答

相关问题