Question

我正在使用可折叠的导航栏，其中的按钮仅在窗口足够小时出现。因此，只要窗口很小，我都希望链接居中对齐，按钮要向左对齐。

当我在按钮上包含某些Bootstrap类时，似乎会出现问题，这些类由于某种原因会迫使链接向左对齐。

<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>

Answer 1

您可以使用@media在CSS中进行此操作。这是一个示例（我不确定这是否是您想要的）

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

Answer 2

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse text-center" id="collapsibleNavbar">
    <ul class="navbar-nav  mx-auto">
      <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>

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

2 个答案: