Question

我正在尝试制作一个导航栏，其内容在变为 md 大小时可折叠，折叠时内容应该在右侧，但我无法这样做有人帮助我，我还附上了代码。< /p>

<nav class="navbar navbar-expand-md navbar-dark bg-warning">
      <a href="" class="navbar-brand ms-md-4 ">PUbG Lite Reborn</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 ms-md-auto me-4">
          <li class="nav-item">
              <a href="" class="nav-link">Contact-Us</a>
          </li >
          <li class="nav-item">
              <a href="" class="nav-link">Pricing</a>
          </li>
          <li class="nav-item">
              <a href="" class="nav-link">Downloads</a>
          </li>
          </ul>
      </div>
  </nav>

Answer 1

如果您希望链接文本右对齐，只需将 .text-end 添加到您的 .navbar-collapse：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.css">

<nav class="navbar navbar-expand-md navbar-dark bg-warning">
  <a href="" class="navbar-brand ms-md-4 ">PUbG Lite Reborn</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 text-end" id="navbarSupportedContent">
    <ul class="navbar-nav ms-md-auto me-4">
      <li class="nav-item">
        <a href="" class="nav-link">Contact-Us</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">Pricing</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">Downloads</a>
      </li>
    </ul>
  </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

如果您希望 ul.navbar-nav 位于右侧（不是 100% 宽度和左对齐文本），您可以使用 flex 容器包装元素：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.css">

<nav class="navbar navbar-expand-md navbar-dark bg-warning">
  <a href="" class="navbar-brand ms-md-4 ">PUbG Lite Reborn</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">
    <div class="d-flex justify-content-end ms-auto">
      <ul class="navbar-nav me-4">
        <li class="nav-item">
          <a href="" class="nav-link">Contact-Us</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Downloads</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

我的导航栏下的可折叠菜单没有到右侧

1 个答案: