Bootstrap 5导航栏链接无法精确居中的技术求助

问题描述 #

我使用Bootstrap 5框架，希望将导航栏中的部分链接精确居中。目前已为对应navbar-nav添加mx-auto类，但链接仍偏右，未实现精确居中。

相关代码：

<header>
    <nav class="navbar navbar-expand-lg py-5">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/logo.webp" alt="azurverify logo" class="img-fluid">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#products">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#terms">Terms</a>
                    </li>
                </ul>

                <ul class="navbar-nav">
                    <li class="nav-item mx-auto">
                        <div class="btn btn-primary">
                            Telegram
                            &nbsp;
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="28" fill="currentColor"><path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14.4415206,6 C14.060553,6.00676048 13.476055,6.20741135 10.663148,7.36249773 C9.67796175,7.7670526 7.70897661,8.60437935 4.75619264,9.87447795 C4.27670659,10.0627254 4.02553067,10.2468857 4.00266485,10.4269588 C3.95876487,10.7726802 4.46291296,10.8803081 5.09723696,11.0838761 C5.61440201,11.2498453 6.31007997,11.4440124 6.67173438,11.4517262 C6.99978943,11.4587234 7.36593635,11.3251987 7.77017511,11.051152 C10.5290529,9.21254679 11.9531977,8.28322679 12.0426094,8.26319203 C12.1056879,8.24905787 12.1930992,8.23128593 12.2523244,8.28325656 C12.3115496,8.33522719 12.3057275,8.43364956 12.299454,8.46005377 C12.2492926,8.67117474 9.65764825,10.998457 9.50849738,11.1513987 L9.43697409,11.2233057 C8.88741493,11.7661123 8.33196049,12.1205055 9.290333,12.7440164 C10.155665,13.3069957 10.6592923,13.6661378 11.5507686,14.2430701 C12.1204738,14.6117635 12.5671299,15.0489784 13.1553348,14.9955401 C13.4259939,14.9709508 13.705567,14.7196888 13.8475521,13.9703127 C14.1831052,12.1993135 14.8426779,8.36209709 14.9951103,6.78087197 C15.0084653,6.64233621 14.9916649,6.46503787 14.9781732,6.38720805 C14.9646815,6.30937823 14.9364876,6.19848702 14.8340164,6.11639754 C14.7126597,6.01917896 14.5253109,5.99867765 14.4415206,6 Z"></path></svg>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

当前效果：

解决方案 #

方法一：让右侧导航完全靠右 #

问题根源是右侧的navbar-nav占用了部分右侧空间，导致中间导航的mx-auto无法在完整的剩余空间内居中。给右侧导航添加ms-auto类，将其推到容器最右侧，就能让中间导航获得完整的剩余空间实现居中：

修改右侧的ul标签：

<ul class="navbar-nav ms-auto">

方法二：让中间导航占满宽度并内部居中 #

如果希望中间导航始终相对于整个导航栏容器居中，不受右侧元素影响，可以给中间的navbar-nav添加w-100 justify-content-center类，同时移除mx-auto：

修改中间的ul标签：

<ul class="navbar-nav w-100 justify-content-center">

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