Django应用移动端视图响应式优化：移除帖子间多余空白

问题背景 #

优化Django应用移动端视图响应性时，发现小屏幕尺寸下帖子之间存在多余空白（已用蓝色标记），需要移除这些空白。

模板代码 #

<section class="category-section">
   <div class="container" data-aos="fade-up">

     <div class="section-header d-flex justify-content-between align-items-center mb-5">
       <h2>Politics</h2>
       <div><a href="politics" class="more">See All Politics</a></div>
     </div>

     <div class="row">
       {% for politic in politics%}
       {% if forloop.counter < 11 %}
       <div class="post-entry-1 col-lg-2 col-md-6 col-xs-12 mx-1">
           <a href="/politicalpost/{{politic.id}}"><img src="{{politic.image.url}}" alt="" class="post_img img-fluid"></a>
           <div class="post-meta float-right">
               <span class="date">{{politic.category}}</span> 
               <span class="mx-1">&bullet;</span> 
               <span>{{politic.created_at}}</span>
           </div>
           <h2 class="mb-2"><a href="/politicalpost/{{politic.id}}">{{politic.title}}</a></h2>
           <span class="author mb-3 d-block">Ole Pundit</span>
           <p class="mb-4 d-block">{{politic.body| safe | truncatewords:15}}</p>
       </div>
       {% endif %}  
       {% endfor %}
     </div>
   </div>
</section>

关联CSS样式 #

.post-entry-1 {
  margin-bottom: 30px;
}
.post-entry-1 img {
  margin-bottom: 30px;
}
.post-entry-1 h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  font-weight: 500;
}
.post-entry-1 h2 a {
  color: var(--color-black);
}
.post-entry-1.lg h2 {
  font-size: 40px;
  line-height: 1;
}

.post-meta {
  font-size: 11px;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-secondary);
  color: rgba(var(--color-black-rgb), 0.4);
  margin-bottom: 10px;
}

问题根源 #

1. 全局底部外边距：.post-entry-1设置的margin-bottom: 30px在所有屏幕尺寸生效，小屏幕下帖子垂直排列（col-xs-12），这个间距直接形成了帖子间的多余空白。
2. 内部元素间距累积：帖子内的图片、标题、作者信息、正文摘要都设置了垂直外边距，在小屏幕下这些间距叠加，放大了整体空白感。
3. 横向外边距的布局干扰：模板中mx-1类给帖子容器添加了左右外边距，小屏幕下可能导致容器宽度溢出，间接引发布局异常，加剧空白问题。

解决方案 #

1. 针对性调整小屏幕下的帖子底部间距 #

添加媒体查询，在小屏幕（宽度≤767px）时缩小或移除帖子容器的底部外边距：

@media (max-width: 767px) {
  .post-entry-1 {
    margin-bottom: 15px; /* 可根据需求调整为0 */
  }
}

2. 精简小屏幕内部元素间距 #

同样通过媒体查询，减小帖子内部元素的垂直间距，适配小屏幕布局：

@media (max-width: 767px) {
  .post-entry-1 img {
    margin-bottom: 15px;
  }
  .post-entry-1 h2 {
    margin-bottom: 10px;
    font-size: 18px; /* 同步缩小标题字号更适配小屏 */
  }
  .author.mb-3 {
    margin-bottom: 0.5rem !important;
  }
  .p.mb-4 {
    margin-bottom: 1rem !important;
  }
}

3. 移除小屏幕下的横向外边距 #

如果mx-1在小屏幕下无必要，可通过媒体查询移除：

@media (max-width: 767px) {
  .post-entry-1.mx-1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

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