ページの幅を広げるnavbarドロップダウン

Question

ブートストラップ4ベータ2

私は右揃えのナビゲーションバーがあります。ドロップダウンをクリックすると、ページが右に広がります。私は一時的な修正として間違っ

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

何をやっている、私は、ナビゲーションバーの最初のdivにcontainerクラスを入れています。それよりも良い方法がありますか？

Answer 1

メニューアラインメントにブートストラップのマニュアルに従って、あなたの.dropdown-menuにクラス.dropdown-menu-rightを追加します。

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