Bootstrap弹性布局中无“占位空间”概念，需用flex-grow-1 flex-shrink-1 flex-basis-0实现空白区域分配，或用ms-auto/me-auto通过自动外边距推挤元素。
Bootstrap弹性布局中没有“占位空间”这个内置概念，但你实际想要的，是让某个元素占据一段空白区域、撑开布局或留出间隙——这得靠 flex 本身的分配逻辑，而不是加个空 或 div。
为什么直接加空 div 不可靠
在 d-flex 容器里放一个空 <div></div>，它默认宽高为 0，也不会自动占剩余空间。更糟的是，如果父容器没设 min-height 或高度约束，整个 flex 链会塌缩，空 div 看不见也起不了作用。
- 空
div没内容、没尺寸、没flex-basis，浏览器不会给它分配空间 -
col-*类包裹的空元素仍受flex: 0 0 auto限制，flex-grow-1会被覆盖 - 用
margin或padding模拟“占位”，本质是挪动其他元素，不是真正预留空间
用 flex-grow + flex-basis 控制空白区域
真正在 flex 布局中“插入占位空间”，等价于：让一个元素不显示内容，但参与 flex 分配，并按需吞掉指定比例的剩余空间。关键在显式清空它的基础尺寸。
- 给占位元素加
flex: 1 0 0（即flex-grow-1 flex-shrink-1 flex-basis-0） - 必须确保它是
d-flex的**直接子项**，不能嵌套在.col或带width的容器里 - 若占位元素含图片、iframe 或文本，额外加
min-width: 0防止固有尺寸干扰 - 示例：
<div class="d-flex"> <div class="bg-primary p-2">Left</div> <div class="flex-grow-1 flex-shrink-1 flex-basis-0"></div> <div class="bg-success p-2">Right</div> </div>
用 .ms-auto / .me-auto 实现自动边距占位
当你要的只是“把某元素推到右侧/底部留白”，不用占位元素，用自动外边距更轻量、语义更准。
-
ms-auto（margin-left: auto）会让左侧所有兄弟元素靠左，该元素独占右侧剩余空间 -
me-auto同理用于右侧，mt-auto/mb-auto用于纵向布局 - 注意：只对 flex 项目生效，且要求父容器是
d-flex，方向匹配（如flex-column下mt-auto才有效） - 比
flex-grow-1更干净——它不创建新元素，也不参与宽度计算，纯靠 margin 推挤
横向 vs 纵向占位的陷阱
横向填空（比如侧边栏+主区之间留白）和纵向填空（比如 header 和 footer 之间的 main 区域）看似一样，但约束条件完全不同。
- 横向：父容器只需
d-flex flex-row，flex-grow-1能立刻生效 - 纵向：外层必须有明确高度来源，比如
min-vh-100或height: 100vh，否则flex-column+flex-grow-1会失效 - iOS Safari 中，输入框聚焦时页面缩放可能让
flex-grow-1区域塌陷，此时要加min-height: 0到该区域 -
.container和.row默认不是 flex 容器，别指望它们自动撑高——哪怕你给子项加了flex-grow-1
