Navbar链接因添加登录注册按钮偏离居中问题求助

添加「登录（Log In）」和「注册（Sign Up）」按钮后，导航栏的链接位置偏移，无法完美居中，请问原因是什么？

对应代码： #

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
            aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars"></span> Menu
        </button>
        <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item <?= (current_url() == base_url('home')) ? 'active' : '' ?>">
                    <a href="<?= base_url('home') ?>" class="nav-link">Home</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('contact')) ? 'active' : '' ?>">
                    <a href="<?= base_url('contact') ?>" class="nav-link">Contact</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboard')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboard') ?>" class="nav-link">Dashboard</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboardF')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboardF') ?>" class="nav-link">Firebase Testing</a>
                </li>
            </ul>
            <div class="d-flex ms-auto">
                <a href="<?= base_url('login') ?>" class="btn btn-outline-light me-2">Log In</a>
                <a href="<?= base_url('signup') ?>" class="btn btn-primary">Sign Up</a>
            </div>
        </div>
    </div>
</nav>

问题原因 #

navbar-nav mx-auto原本是让导航列表在容器内水平居中，但右侧按钮容器的ms-auto会占据右侧空间，导致导航列表的居中是扣除按钮容器宽度后的剩余空间居中，而非整个导航栏的绝对居中。

解决方法 #

方法1：拆分结构（推荐）

将按钮组移到collapse容器外，让导航链接容器独立占据中间区域：

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
            aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars"></span> Menu
        </button>
        <div class="collapse navbar-collapse d-flex justify-content-center align-items-center" id="ftco-nav">
            <ul class="navbar-nav">
                <li class="nav-item <?= (current_url() == base_url('home')) ? 'active' : '' ?>">
                    <a href="<?= base_url('home') ?>" class="nav-link">Home</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('contact')) ? 'active' : '' ?>">
                    <a href="<?= base_url('contact') ?>" class="nav-link">Contact</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboard')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboard') ?>" class="nav-link">Dashboard</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboardF')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboardF') ?>" class="nav-link">Firebase Testing</a>
                </li>
            </ul>
        </div>
        <div class="d-flex">
            <a href="<?= base_url('login') ?>" class="btn btn-outline-light me-2">Log In</a>
            <a href="<?= base_url('signup') ?>" class="btn btn-primary">Sign Up</a>
        </div>
    </div>
</nav>

这样导航链接容器通过justify-content-center实现绝对居中，按钮组独立在右侧，互不影响。

方法2：绝对定位按钮组

给导航栏添加相对定位，按钮组用绝对定位脱离文档流，不影响导航列表的居中计算：

#ftco-navbar {
    position: relative;
}
.btn-group-container {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

修改HTML中按钮容器的类：

<div class="d-flex btn-group-container">
    <a href="<?= base_url('login') ?>" class="btn btn-outline-light me-2">Log In</a>
    <a href="<?= base_url('signup') ?>" class="btn btn-primary">Sign Up</a>
</div>

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