移动端间距问题本质是加错位置或单位/断点不匹配：应避免直接修改.row/.nav-item/.form-control的margin/padding，而需用mt-类、css变量--bs-gutter-y、.nav-link的padding、分层mb-及g-*工具类，并严格匹配bootstrap断点。
移动端间距问题不是“加少了”，而是“加错了地方”或“单位/断点不匹配”——直接改 .row、.nav-item 或 .form-control 的 margin/padding，八成会引发折叠错位、热区失效或响应式断裂。
别碰 .row 的 margin，用兄弟选择器或 mt-* 类加空隙
给 .row 自己加 margin-bottom 会干扰栅格系统的垂直节奏，尤其在嵌套或与卡片、标题混排时，容易叠加出意外空白。真正该控制的是行与行之间的视觉间隔：
- 在下一个
.row上加mt-4（比在上一个加mb-4更稳，避免 margin 折叠） - 若需统一所有行间距离，覆盖 CSS 变量
--bs-gutter-y比逐个加类更可靠 - 检查是否误把
<h2></h2>自带的margin-bottom当成“行间距”——它根本不是.row的问题
导航项横向间距必须作用于 .nav-link，不是 .nav-item
给 .nav-item 加 mx-2 或 margin-right 是最常见错误：桌面端看似正常，但折叠后水平 margin 会变成顶部空白，顶飞汉堡按钮甚至破坏下拉动画高度计算。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确做法是调
.nav-link的padding-left/padding-right，比如px-3或自定义padding-inline: 0.75rem 1.25rem - 响应式场景用
px-sm-2 px-md-3 px-lg-4，防小屏 padding 过大导致换行 - 如果是
nav-tabs，必须用margin-inline: 0.5rem或.nav-link:not(:last-child) { margin-right: 0.75rem; }，改padding会错位
表单紧凑化要分层加 mb-*，别只盯 .form-group
.form-control 默认没 margin，真正撑开间距的是 .form-label（margin-bottom: 0.5rem）、.form-control 外层容器（margin-bottom: 1rem）和 .form-text（margin-top: 0.25rem）。全加 mb-0 会贴死，不加又松垮。
-
<label></label>上加mb-0，<input>外层容器加mb-1，<small class="form-text"></small>加mt-0 -
.form-check建议用mb-1而非mb-0，否则复选框和文字会紧贴 - 多个
.input-group堆叠时，mb-0必须加在.input-group容器上，不是内部的.form-control
列间距优先用 g-* 工具类，别靠 px-* 硬凑
移动端列堆叠时出现“不想要的间隙”，常因 .row 的 flex-direction: row 在小屏下未切换方向，或默认 gutter 未关闭。用 px-0 强行清内边距，大屏无法自动恢复原始 gutter 视觉效果。
- 移除所有 gutter：用
g-0（等价于gx-0 gy-0） - 仅关水平间距（保持垂直堆叠留白）：
gx-0 - 移动端紧凑、桌面端恢复间距：
gy-0 gy-md-3（gy控制列间垂直间距） - 若需彻底解决堆叠间隙，配合
flex-column flex-md-row切换容器方向，比硬调间距更治本
最易被忽略的一点：所有响应式间距类（如 mt-md-3）依赖 Bootstrap 版本的断点定义。Bootstrap 5 的 md 是 768px，抄错断点值或混淆 v4/v5 文档，@media 规则就形同虚设。先查 bootstrap?.version，再动手写类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
