下拉菜單超出屏幕

Question

我想在我的導航欄中添加一個下拉菜單，但菜單總是在頁面之外。

這是我的代碼：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">PEL</a> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle mr-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${pseudo}</button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item dropdown-menu-right" type="button">Action</button> <button class="dropdown-item dropdown-menu-right" type="button">Another action</button> <button class="dropdown-item dropdown-menu-right" type="button">Something else here</button> </div> </div> </nav>

下拉菜單效果很好，但它總是在我屏幕的右側之外......

我在頁面右側的下拉菜單創建了一個小空間。

Answer 1

根據 v4.0 文檔：

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

小心。 下拉菜單的位置得益於 Popper.js（除非它們包含在導航欄中）。

兩種選擇：

1. 升級您的引導程序版本。 它在 v4.6 上運行良好
2. 使用自定義類而不是引導導航欄

[編輯 1] 這是一個使用 bootstrap v4.6 的工作示例。 我還刪除了mr-3 class 以獲得更好的渲染效果。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">PEL</a> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${pseudo}</button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> </nav> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>