Bootstrap下拉菜单与文本重叠问题求助（已移除me-auto类）

问题情况 #

使用Bootstrap开发时遇到下拉菜单与文本重叠的问题，移除me-auto类后仍未解决。

代码中的问题分析 #

从提供的代码来看，存在几个关键问题：

• HTML语法错误：<hr">是无效标签，正确写法应为<hr>
• 错误使用row类：给导航ul添加row会引入栅格布局的默认margin/padding，破坏导航原生布局逻辑
• 过时类名：navbar-right在Bootstrap 5中已被弃用，会导致布局异常

修正后的代码示例 #

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul id="nav-list" class="nav navbar-nav justify-content-end d-block d-sm-none">
        <li class="li-Menu text-center">Chiken</li>
        <hr>
        <li class="li-Menu text-center">Beef</li>
        <hr>
        <li class="li-Menu text-center">Sushi</li>
    </ul>
</div>

额外排查方向 #

• 检查自定义.li-Menu样式：确认是否设置了position: absolute、不合理的z-index或margin/padding，这些都可能导致元素重叠
• 验证Bootstrap版本兼容性：如果使用Bootstrap 5，确保所有类名都是当前版本的规范，避免使用旧版本的类

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