Html 如何将左侧按钮与可折叠导航栏中心的链接对齐？

我使用的是一个可折叠的导航栏，当窗口足够小时按钮才会出现。所以我希望链接在中间对齐，按钮在窗口小的时候向左对齐

当我在按钮上包含某些引导类时，问题似乎就发生了，这些类出于某种原因迫使链接向左对齐

<nav id="nav" class="navbar navbar-expand-sm navbar-light justify-content-center">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li id="NavbarLinks" class="nav-item">
                <a class="nav-link" href="Home.php">Home</a>
            </li>
            <li id="NavbarLinks" class="nav-item">
                <a class="nav-link" href="Services.php">Services</a>
            </li>
            <li id="NavbarLinks" class="navabr-item">
                <a class="nav-link" href="BookAppointment.php">Book Appointment</a>
            </li>
        </ul>
    </div>
</nav>

您可以在CSS中使用

@media

执行此操作。下面是一个例子（我不确定这是否是您想要的）

---

你是在尝试这样的事情吗？如果我理解正确，您希望切换按钮位于左侧，但当导航栏展开时链接本身位于中心

我想我在最初的问题中解释得不是很好。首先，我有一个标准导航栏，链接在中间对齐。然后我添加了按钮和可折叠类，这使得链接向左对齐。当窗口足够小时，按钮也会向左对齐。我试着让按钮向左对齐，链接居中对齐。我尝试了你的解决方案，但没有改变anything@BradyHarper你能试着把你所有的代码都发出来吗？当窗口足够大时，我希望导航栏只是一个标准导航栏，中间没有切换按钮和链接，当窗口较小时，我希望链接消失，切换按钮出现在左侧。我尝试添加文本中心类，但是它只在导航栏折叠时才将文本居中，这非常奇怪。当导航栏展开时，它没有影响。我还尝试将该类添加到nav标记，它也会这样做thing@BradyHarper好的，我只想说清楚，你想链接始终居中吗？导航栏y完全显示时，以及折叠和展开时？@BradyHarper再次检查答案

@media (max-width:767px) {
    .navbar-toggler {
        left: 0px;
    }
    .nav-item {
        text-align: center;
    }
}