Bootstrap 移动可折叠汉堡图标向右对齐

zphenhs4 于 2023-04-03 发布在 Bootstrap

关注(0)|答案(1)|浏览(109)

我目前正在学习Angela Yu的初级Web开发课程。她在教程中使用Bootstrap 4，然而，Bootstrap 5是目前的版本，这是显着不同的。
在她让我们使用的框架HTML中，当视口缩小到移动的时，她的汉堡包栏是右对齐的。然而，由于Bootstrap版本的差异，我似乎无法找到如何像她那样将其移动到右侧，我的不会从左侧对齐移动。
Here's the current version vs. where I would like it to be placed (right justified)

<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg">
  <div class="container-fluid ">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand me-auto" href="#">Tindog</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Content</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我尝试了ms-auto和ml-auto。我还尝试了在折叠菜单上弄乱justify-content-end类。没有任何效果。

twitter-bootstrap

来源：https://stackoverflow.com/questions/75894307/moving-collapsible-hamburger-icon-to-right-justified

1条答案

按热度按时间

ego6inou1#

我不确定你是否希望链接也在左边，所以这个怎么样？
我补充道

<div class="d-flex flex-row-reverse">

在链接的周围，使文本向右对齐。

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

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Tindog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <div class="d-flex flex-row-reverse">
      <ul class="navbar-nav ms-auto mb-2 mb-md-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
      </ul>
      </div>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-04-03

我来回答

Bootstrap 移动可折叠汉堡图标向右对齐

1条答案

相关问题

热门标签

最新问答