Bootstrap 5.1 下拉菜单右对齐不起作用

Question

我想将我的下拉菜单（响应式）对齐到页面的右侧，同时将“创建事件”按钮保持在左侧。 docs 要求将 .dropdown-menu-end 添加到 ul class——这没有用——所以我已经将它添加到我的下拉菜单的每个 class 并且仍然运气不好。

我的代码怎么了？

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
  <div>
    <a class="btn btn-primary mb-2" href="/events/new">Create event</a>

    <span class="dropdown dropdown-menu-end">
            <a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                Events
            </a>
          
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
              <li><a class="dropdown-item" href="/events">All Events</a></li>
              <li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
              <li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
            </ul>
        </span>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Answer 1

您可以使用 Bootstrap 的 flex utilities 来对齐带有 space 的按钮。我已将 d-flex 和 justify-content-between 添加到父元素。

您的方法不起作用的原因是因为该文档指的是相对于按钮的下拉对齐方式，而不是相对于页面（或父元素）的按钮。

我也将你周围的跨度转换为 div。跨度通常与内联内容相关联。如果不出意外，它会使您的标记更直观 reader。它还使代码 auto-format 更干净一些。将您的代码段与我的进行比较——我在两者上都使用了 Tidy 按钮。

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
  <div class="d-flex justify-content-between">
    <a class="btn btn-primary mb-2" href="/events/new">Create event</a>

    <div class="dropdown dropdown-menu-end">
      <a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
          Events
      </a>

      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="/events">All Events</a></li>
        <li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
        <li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Bootstrap 5.1 下拉菜单右对齐不起作用

Bootstrap 5.1 dropdown menu align right not working

javascript

drop-down-menu

alignment

bootstrap-5