如何在不破坏汉堡菜单的前提下将Bootstrap按钮放置在右上角

解决方案 #

你只需要利用Bootstrap自带的响应式排序类order-*调整元素显示顺序即可，全程仅需1个连接按钮，不会破坏原有菜单的折叠功能：

<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
    <a href="#" class="navbar-brand">Name on Chain</a>
    <!-- 可折叠导航菜单 -->
    <div class="collapse navbar-collapse order-1 order-md-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Guide</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Contact</a>
            </li>
        </ul>
    </div>
    <!-- 钱包连接按钮 -->
    <button type="button" class="btn btn-primary ms-auto me-2 order-0 order-md-1" id="connectWallet">Connect Wallet</button>
    <!-- 汉堡菜单按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

实现逻辑

• 移动端（md宽度以下，菜单折叠状态）：order-0让连接按钮优先级高于折叠菜单，显示顺序为「品牌标识 → 连接按钮 → 汉堡菜单」，连接按钮固定在汉堡菜单左侧，不会破坏折叠功能
• 桌面端（md宽度及以上，菜单展开状态）：order-md-0让导航菜单优先级高于连接按钮，显示顺序为「品牌标识 → 导航菜单项 → 连接按钮」，符合常规桌面端导航布局

如果你用的是Bootstrap 5版本，只需要把汉堡按钮上的data-toggle改为data-bs-toggle、data-target改为data-bs-target即可正常使用。

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