<p>底部导航栏不能直接用 row + col 实现等分布局，因 navbar 默认为 flex 容器，与栅格的 flex 规则冲突，导致错位、溢出及断点失效；且 col-* 在超小屏下仍强制等宽，引发文字折行异常。</p>
底部导航栏用 bootstrap 栅格实现等分布局，**不能直接套 row + col 堆在 footer 里**——因为默认的 navbar 是 flex 容器，而栅格是基于 flex 的另一套规则，混用会冲突、错位、断点失效。
为什么 row + col 在底部导航栏里容易失效
常见错误是把底部导航写成这样：
<footer class="bg-light">
<div class="row">
<div class="col-3"><a href="#">首页</a></div>
<div class="col-3"><a href="#">分类</a></div>
<div class="col-3"><a href="#">购物车</a></div>
<div class="col-3"><a href="#">我的</a></div>
</div>
</footer>
问题在于：row 默认有负 margin，col 有 padding，而 footer 通常没设 container 或 container-fluid 包裹，导致左右溢出或文字换行异常；更关键的是，移动端小屏下 col-3 仍强行占 25% 宽度，链接文字被压缩甚至折行错乱。
-
col-*类在超小屏（col-12 才能保证单列 - 底部导航本质是「水平等分+点击区域明确」，不是内容区块，更适合用原生
navbar的justify-content-around或nav-fill - 栅格的 12 列系统在底部导航中冗余——你不需要响应式断点切换列数，只需要「始终等宽」或「小屏单排、大屏四等分」两种模式
用 navbar + nav-fill 实现真等分布局
Bootstrap 5 内置的 nav-fill 是最轻量、最可靠的选择，它让每个 nav-item 自动均分父容器宽度，且天然支持响应式折叠逻辑。
<nav class="navbar navbar-expand-sm bg-body-tertiary">
<div class="container-fluid p-0">
<ul class="nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link py-2" href="#">? 首页</a>
</li>
<li class="nav-item">
<a class="nav-link py-2" href="#">? 分类</a>
</li>
<li class="nav-item">
<a class="nav-link py-2" href="#">? 购物车</a>
</li>
<li class="nav-item">
<a class="nav-link py-2" href="#">? 我的</a>
</li>
</ul>
</div>
</nav>
-
navbar-expand-sm表示从 sm（576px）起展开为横排，小屏自动收为折叠汉堡菜单（需配合navbar-toggler） -
nav-fill让每个nav-item等宽填充整行，无需计算 12 列比例 -
py-2控制上下内边距，避免文字贴边；w-100确保ul占满容器 - 如果不想折叠（比如纯底部 tab），去掉
navbar-expand-sm，保留navbar和nav-fill即可
需要自定义断点时，用 col 但必须配 flex-column 和 text-center
当你要在底部放图标+文字组合，且要求小屏堆叠、大屏等分（比如 4 个功能入口），才考虑栅格。但必须绕开 row 的负 margin 陷阱：
- 不用
container包裹，直接用container-fluid px-0清除左右 padding - 每栏用
col-12 col-sm-6 col-md-3，顺序不能颠倒，否则断点不生效 - 每栏内部加
flex-column align-items-center text-center，避免图标和文字错位 - 小屏下文字易折行，给链接加
text-nowrap或限制字体大小（如fs-6）
示例结构：
<footer class="bg-light">
<div class="container-fluid px-0">
<div class="row g-0">
<div class="col-12 col-sm-6 col-md-3 d-flex flex-column align-items-center py-2">
<i class="bi bi-house fs-4"></i>
<a href="#" class="text-decoration-none text-nowrap mt-1">首页</a>
</div>
<div class="col-12 col-sm-6 col-md-3 d-flex flex-column align-items-center py-2">
<i class="bi bi-list fs-4"></i>
<a href="#" class="text-decoration-none text-nowrap mt-1">分类</a>
</div>
<div class="col-12 col-sm-6 col-md-3 d-flex flex-column align-items-center py-2">
<i class="bi bi-cart fs-4"></i>
<a href="#" class="text-decoration-none text-nowrap mt-1">购物车</a>
</div>
<div class="col-12 col-sm-6 col-md-3 d-flex flex-column align-items-center py-2">
<i class="bi bi-person fs-4"></i>
<a href="#" class="text-decoration-none text-nowrap mt-1">我的</a>
</div>
</div>
</div>
</footer>
真正难的不是怎么写等分，而是判断「该不该用栅格」：底部导航的核心是触控友好和视觉节奏，不是内容分区。多数情况下，nav-fill + navbar 更稳；只有当你需要混合图标、徽标、短文本，并且明确要控制每栏内部流方向时，才值得上栅格，且务必清掉所有隐式 padding/margin 干扰。
