navbar Dropdown verursacht Seitenbreite

Question

Bootstrap 4 beta 2.

Ich habe eine rechtsbündig navbar zu verlängern, und wenn ich auf den Dropdown klicken, wird die Seite erstreckt rechten Stationen. Was bin ich Als temporäre Lösung falsch

<nav class="navbar navbar-expand-lg navbar-light bg-white" id="alertNavBar"> 

    <div class="collapse navbar-collapse justify-content-end "> 
    <ul class="navbar-nav"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Alerts <i class="fa fa-bell"></i></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Messages <i class="fa fa-envelope"></i></a> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Settings <i class="fa fa-cog"></i> 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">App Config</a> 
     </div> 
     </li>  

    </ul> 
    </div> 
</nav> 

tun, habe ich eine container Klasse auf dem ersten div in der Navigationsleiste setzen. Gibt es einen Weg, der besser ist als das?

Answer 1

Fügen Sie die Klasse .dropdown-menu-right auf Ihre .dropdown-menu gemäß Dokumentation des Bootstrap auf Menü Ausrichtung:

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