Django教程中所有已借阅图书列表页面渲染异常求助

我正在学习Mozilla官方的Django教程，目前卡在实现所有已借阅图书列表页面的环节。我参考了教程配套的官方示例代码，但按要求编写模板代码后，页面渲染结果仍不符合预期：

• 自己编写的代码截图：展示了我写的模板代码内容
• 当前页面渲染效果截图：页面实际呈现的内容与预期有差异
• 预期渲染效果截图：展示了页面应该达到的样式和内容

麻烦各位帮忙排查问题，以下是我编写的模板代码：

{% extends "base_generic.html" %}

{% block content %}
<h1>All Borrowed Books</h1>
{% if bookinstance_list %}
<ul>

  {% for bookinst in bookinstance_list %} 
  <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
    <a href="{% url 'book-detail' bookinst.book.pk %}">{{bookinst.book.title}}</a> ({{ bookinst.due_back }}) {% if user.is_staff %}- {{ bookinst.borrower }}{% endif %} {% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
  </li>
  {% endfor %}
</ul>

{% else %}
  <p>There are no books borrowed.</p>
{% endif %}       
{% endblock %}

内容的提问来源于stack exchange，提问作者YvanKOB