如何解决Django:分页不会在第1页居中
我添加了我发现的模板分页,它可以正常工作,但即使其他回答建议使用“文本中心”和“正当内容中心”,也不会在第1页居中。在第2页和第3页上看起来都很好...如下所示
{% block pagination %}
{% if is_paginated %}
<div class="text-center">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
{% endif %}
{% endblock %}
这是我使用的代码,这就是页面1上的样子以及向右拖动的代码。我目前没有任何分页的CSS代码,尽管我没有运气就尝试了其他选项。
如果我删除“文本中心”,则第1页居中,而第2/3页向左拉,所以我有些困惑。
p.s这是我的第一篇django帖子,所以请告诉我是否需要更多信息等。
谢谢!
编辑:将其添加到CSS但没有用-
.pagination {
justify-content: center;
}
尝试从其他答案中选择d-flex类,第1页居中放置第2/3页向左拉:
{% block pagination %}
{% if is_paginated %}
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 py-5 border d-flex">
<ul class="pagination mx-auto">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
解决方法
设法弄清楚,以防万一有人遇到相同的问题,我需要使用与页面其余部分(我很傻)类似的布局类,例如“ container-wrap”和“ col- md-6 col-md-offset-3 text-center“:
{% block pagination %}
{% if is_paginated %}
<div class="container-wrap">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="pagination mx-auto">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endif %}
{% endblock %}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。