设置33.3%宽度的Flexbox出现空白间隙问题

嘿，我之前也碰到过类似的大屏幕布局间隙问题，结合你给出的代码片段（能看出用了Bootstrap的container-fluid、row no-gutters这些类），给你几个排查和解决的方向：

1. 检查项目卡片的宽度与布局逻辑 #

大概率是你的项目卡片（.popup-g...应该是类似popup-gallery的容器）没有在大屏幕下自动填满剩余空间。比如：

• 如果卡片用了固定宽度或者带max-width的百分比宽度，大屏幕下总宽度不够就会出现空白；
• 如果用了Flex布局但没给卡片加flex-grow: 1，也会导致卡片不会拉伸填充。

快速解决方案：
用Bootstrap的响应式列类替代自定义宽度，比如根据屏幕尺寸控制每行显示的项目数：

<div class="row no-gutters row-cols-1 row-cols-md-2 row-cols-lg-4">
  <div class="col">
    <!-- 你的项目卡片内容 -->
  </div>
  <!-- 重复添加项目卡片 -->
</div>

row-cols-lg-4会让大屏幕下每行显示4个项目，自动填满整行，不会留空白。

2. 排查父容器的宽度限制 #

虽然你给container-fluid加了p-0，但有可能更高层的容器（比如#portfolio或者它的父元素）被设置了max-width，导致大屏幕下无法占满视口宽度。

验证方法：
在DevTools的控制台输入：

#portfolio, #portfolio .container-fluid { outline: 1px solid red; }

看看红色边框是不是铺满了整个屏幕宽度。如果没有，就给容器加自定义CSS：

#portfolio .container-fluid {
  width: 100vw;
  max-width: 100%;
}

100vw是视口宽度单位，能强制容器占满屏幕，避免被其他父元素的max-width限制。

3. 检查换行与对齐方式 #

如果是最后一行项目数量不足导致的空白，可以试试：

• 用Flex布局的justify-content: stretch替代center或space-between；
• 如果用Grid布局，添加grid-auto-flow: dense让空白位置被后续项目填充；
• 或者用Bootstrap的justify-content-stretch类给row添加：

<div class="row no-gutters justify-content-stretch">
  <!-- 项目卡片 -->
</div>

4. 排查隐藏元素或浮动干扰 #

有时候某个隐藏的元素、浮动元素会悄悄占据布局空间，导致错位。可以给所有元素加临时边框排查：

* { outline: 1px dashed blue; }

在DevTools里逐个检查元素的范围，看看哪个元素的尺寸超出预期，导致出现间隙。

按照这个思路排查，应该能快速定位到问题所在～

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