Django应用移动端适配求助：导航与分页布局错乱

安全阿岳

2026-7-12

移动端布局适配修复方案

一、导航栏（用户名、创建按钮、登出按钮）修复

核心问题是移动端横向空间不足导致元素挤压混乱，通过Flex布局结合媒体查询实现自适应排列：

修改导航栏CSS：

/* 基础导航容器样式 */
.create_logout_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
}

/* 移除原有的inline-block/inline-flex，由父容器Flex控制排列 */
.create_logout_nav li {
  margin: 0;
}

/* 移动端适配（屏幕宽度≤768px时触发） */
@media (max-width: 768px) {
  .create_logout_nav {
    flex-direction: column;
    align-items: stretch;
  }

  /* 让按钮占满容器宽度，避免挤压 */
  .create_logout_nav .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.6rem 0;
  }
}

检查模板结构，确保标签嵌套正确：

<ul class="create_logout_nav">
  <li>欢迎, {{ user.username }}</li>
  <li><a href="{% url 'article_create' %}" class="btn">Create New article</a></li>
  <li><a href="{% url 'logout' %}" class="btn">Logout</a></li>
</ul>

二、分页组件（Pagination）修复

针对分页按钮挤压、换行异常的问题，用Flex布局+媒体查询优化空间利用：

修改分页CSS：

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.pagination li a, .pagination li span {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.pagination li.active span {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* 移动端适配（屏幕宽度≤576px时触发） */
@media (max-width: 576px) {
  .pagination li a, .pagination li span {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
  }

  /* 隐藏非关键页码，节省空间 */
  .pagination li:not(.active):not(:first-child):not(:last-child):not(.previous):not(.next) {
    display: none;
  }
}