Bootstrap导航栏下拉菜单MySQL查询结果左偏移对齐问题求助

问题根因 #

• 同时加载了Bootstrap4和Bootstrap5两个版本的样式文件，下拉组件的定位规则冲突
• LSNC SPN对应的导航项父容器缺少Bootstrap下拉所需的dropdown类，无法正确计算下拉菜单的定位位置
• 动态生成的下拉项结构不符合Bootstrap规范，多余嵌套导致默认间距异常
• 插入符号被sr-only类隐藏，所以无法正常显示

修复步骤 #

1. 删除重复的Bootstrap样式引用
   移除其中一个版本的Bootstrap CSS，建议保留和你引入的JS版本匹配的Bootstrap4样式，删除以下代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

2. 补全导航项父容器类名
   把LSNC SPN对应的外层<li>标签修改为：

<li class="nav-item dropdown">

和其他导航项结构保持一致，同时满足Bootstrap下拉组件的父容器要求。

3. 修复插入符号显示
   把插入符号的sr-only类移除，修改后代码如下：

<span class="caret"></span>

sr-only类的作用是仅对屏幕阅读器可见，会在可视界面隐藏元素，移除后即可正常显示插入符号。

4. 修正动态下拉项结构
   修改PHP循环输出的代码，把dropdown-item类移到a标签上，去掉多余的嵌套span：

echo "<li><a class='dropdown-item' href='$base_url/admin/downloads.php?idx={$row['cat_code']}'>{$row['cat_name']}</a></li>";

5. （可选）强制下拉菜单对齐
   如果修改后仍有偏移，在你的自定义CSS中添加以下规则，强制下拉菜单和父级导航项左对齐：

.navbar-nav .dropdown-menu {
    left: 0 !important;
    right: auto;
    transform: none !important;
}

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