修复 Bootstrap 导航栏：解决对齐错位与移动端交互失效

后端数据流跑通了，但前端样式和交互崩了。这通常就是布局约束没给到位，或者脚本没挂载上。

表现

导航栏子元素到处乱跳，对齐全乱。切换到移动端，点击汉堡按钮没反应，菜单弹不出来。

分析

1. 布局错乱：CSS 缺了容器级的空间约束，导致浏览器按默认的块级布局排版，没触发 Flex 效果。
2. 交互失效：只引了 Bootstrap 的 CSS 样式，没引 JS 核心库。没有脚本去监听点击事件并驱动折叠动画，交互自然是死的。

解决方案

1. 补齐 CSS 约束 给导航栏父容器强制开启弹性布局，锁死对齐逻辑： .navbar-nav { display: flex; align-items: center; }

2. 挂载 JS 脚本 在 footer.php 底部引入完整的 Bootstrap Bundle 库（包含 Popper.js）。建议放在 wp_footer() 之前，避免阻塞 DOM 解析： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>