简体   繁体   中英

Dropdown menu is out of the screen

I want to add a dropdown menu to my navbar but the menu is always out of the page.

Here is my code:

 <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>

Dropdown works good but it is always out of the right side of my screen...

在此处输入图像描述 在此处输入图像描述

A little space is created by my dropdown menu on the right side of the page.

According to the v4.0 doc:

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

Heads up. Dropdowns are positioned thanks to Popper.js ( except when they are contained in a navbar ).

Two options:

  1. Upgrade your bootstrap version. It's working fine with v4.6
  2. Use custom classes instead of bootstrap navbar

[EDIT 1] Here is a working example with bootstrap v4.6. Also i have removed the mr-3 class for better rendering.

 <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>

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM