Bootstrap 5.1 下拉菜單右對齊不起作用
[英]Bootstrap 5.1 dropdown menu align right not working
問題描述
我想在頁面右側對齊我的下拉菜單（響應式），同時將“創建事件”按鈕保留在左側。 文檔要求將 adding.dropdown-menu-end 添加到 ul 類——這沒有用——所以我將它添加到每個 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>
1 個解決方案
解決方案1
0 已采納 2022-03-03 16:58:20
您可以使用 Bootstrap 的flex 實用程序來調整按鈕與它們之間的空間。 我已將d-flex和justify-content-between添加到父元素。
您的方法不起作用的原因是因為該文檔是指與按鈕相關的下拉列表 alignment，而不是與頁面（或父元素）相關的按鈕。
我還將您周圍的跨度轉換為一個 div。 跨度通常與內聯內容相關聯。 如果沒有別的，它會讓你的標記對讀者來說更直觀。 它還使代碼自動格式化更干凈一些。 將您的代碼段與我的進行比較——我在兩者上都使用了 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>
如何右對齊/對齊引導程序下拉菜單項？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.