Bootstrap 5.1 下拉菜单右对齐不起作用
我想将下拉菜单（响应式）对齐在页面右侧，同时将“创建事件”按钮保留在左侧。 docs 调用将 .dropdown-menu-end 添加到ul 类——这不起作用——所以我将它添加到我的下拉列表中的每个类中，但仍然没有运气。
我的代码怎么了？
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>I want to align my dropdown menu (responsively) on the right side of the page while keeping the "Create Event" button on the left. The docs call for adding .dropdown-menu-end to the ul class--which didn't work--so I've added it to every class for my dropdown and still no luck.
What's going on with my code?
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 Bootstrap 的 flex 实用程序 来调整按钮之间的间距。我已将
d-flex和justify-content- Between添加到父元素。您的方法不起作用的原因是因为该文档指的是相对于按钮的下拉对齐，而不是相对于页面（或父元素）的按钮。
我还将您周围的跨度转换为 div。 Span 通常与内联内容相关。如果不出意外的话，它会让你的标记对读者来说更加直观。它还使代码自动格式化更加干净。将你的代码片段与我的代码片段进行比较——我在两者上都使用了“整洁”按钮。
You can use Bootstrap's flex utilities to justify the buttons with space between them. I've added
d-flexandjustify-content-betweento the parent element.The reason your approach didn't work is because that documentation refers to dropdown alignment with respect to the button, not the button with respect to the page (or parent element).
I've also converted your surrounding span to a div. Spans are usually associated with inline content. If nothing else it makes your markup more intuitive to the reader. It also makes the code auto-format a bit more cleanly. Compare your snippet to mine--I used the Tidy button on both.