如何在Bootstrap折叠导航栏中排除logo并适配多端显示位置？

问题根源 #

当前代码将logo嵌套在id="navbarNavAltMarkup"的折叠导航容器内部，自然会跟随折叠面板的展开/隐藏同步显示。要彻底让logo脱离折叠区，核心是把logo的DOM层级移到折叠容器外，再通过响应式类匹配不同端的位置要求。

具体调整步骤 #

• 把原本嵌在.navbar-nav列表里的logo图片，移动到container-fluid容器内部，和折叠触发按钮、折叠导航容器保持同级，从结构上脱离折叠组件的控制范围
• 给<nav>标签增加position-relative类，作为logo定位的参考基准，避免定位偏移
• 给logo加上响应式适配类，分别匹配移动端、桌面端的位置要求：
  • 移动端（lg断点以下）：让logo靠导航栏右侧垂直居中，实现右上角显示效果
  • 桌面端（lg断点及以上）：让logo切换到整个导航栏的水平居中位置，导航链接在logo两侧均匀排布

调整后的完整可运行代码：

<nav class="navbar navbar-expand-lg navbar-dark position-relative">
    <div class="container-fluid">
        <!-- 左侧折叠触发按钮 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 移出折叠容器的logo 响应式适配位置 -->
        <img 
            src="logo.png" 
            alt="站点logo" 
            width="100" 
            height="45"
            class="position-absolute top-50 end-0 translate-middle-y start-lg-50 end-lg-auto translate-lg-middle"
        >
        <!-- 折叠导航容器 内部仅保留导航链接 -->
        <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
            <div class="navbar-nav justify-content-center align-items-center">
                <a class="nav-link" href="index.html">Home</a>
                <a class="nav-link" href="#">About</a>
                <!-- 桌面端占位元素 撑开logo位置的间距 避免链接被遮挡 -->
                <div class="d-none d-lg-block" style="width:100px;height:45px"></div>
                <a class="nav-link" href="#">Portfolio</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
    </div>
</nav>

适配效果说明 #

• 移动端场景：logo完全处于折叠导航的DOM范围外，展开折叠面板时，面板内只会展示导航链接，不会再混入logo；同时logo固定在导航栏右上角，折叠按钮保持左侧布局，完全匹配交互要求
• 桌面端场景：logo自动切换到整个导航栏的水平居中位置，配合占位元素撑开的间距，导航链接在logo两侧均匀排布，和原设计的视觉效果一致
• 所有定位调整均使用Bootstrap内置工具类实现，不需要额外编写自定义CSS，后续维护成本更低

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