ブートストラップ4-α-2ナビゲーションバーは、上記

Question

を発行以下はOS X上のSafariに組み込まれた応答性のデザイン機能で撮影したスクリーンショットである、ことができますように、ナビゲーションバーを生成するために使用するコードです右のドロップダウンメニューがページ外に出ています。どうすればこれを防ぐことができますか？

<div class="container"> 
<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #ecf0f1"> 
    <a class="hidden-xs-down navbar-brand" href="/"> 
     Brand 
    </a> 
    <ul class="nav navbar-nav"> 

     <li class="nav-item hidden-sm-up"> 
      <a class="nav-link" href="#"> 
       <i class="fa fa-home"></i> 
      </a> 
     </li> 

     <li class="nav-item"> 
      <div class="dropdown"> 
       <a class="dropdown-toggle nav-link" 
        id="user-menu" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false" 
        href="#" 
       > 
        <i class="fa fa-briefcase"></i> 
        <span class="hidden-xs-down">&nbsp;Work</span> 
       </a> 
       <div class="dropdown-menu" 
        aria-labelledby="user-menu" 
       > 
        <a class="dropdown-item" 
         href="#" 
        > 
         <i class="fa fa-fw fa-wrench"></i>&nbsp;Services 
        </a> 
       </div> 
      </div> 
     </li> 

     <li class="nav-item"> 
      <div class="dropdown"> 
       <a class="dropdown-toggle nav-link" 
        id="user-menu" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false" 
        href="#" 
       > 
        <i class="fa fa-users"></i> 
        <span class="hidden-xs-down">&nbsp;Team</span> 
       </a> 
       <div class="dropdown-menu" 
        aria-labelledby="user-menu" 
       > 
        <a class="dropdown-item" 
         href="#" 
        > 
         <i class="fa fa-fw fa-user"></i>&nbsp;People 
        </a> 
       </div> 
      </div> 
     </li> 

     <li class="nav-item"> 
      <div class="dropdown"> 
       <a class="dropdown-toggle nav-link" 
        id="user-menu" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false" 
        href="#" 
       > 
        <i class="fa fa-building-o"></i> 
        <span class="hidden-xs-down">&nbsp;Company</span> 
       </a> 
       <div class="dropdown-menu" 
        aria-labelledby="user-menu" 
       > 
        <a class="dropdown-item" 
         href="#" 
        > 
         <i class="fa fa-fw fa-newspaper-o"></i>&nbsp;News 
        </a> 
       </div> 
      </div> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav pull-xs-right"> 
     <li class="nav-item"> 
      <div class="dropdown"> 
       <a class="dropdown-toggle nav-link" 
        id="user-menu" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false" 
        href="#" 
       > 
        <i class="fa fa-user"></i> 
        <span class="hidden-xs-down">&nbsp;Username</span> 
       </a> 
       <div class="dropdown-menu" 
        aria-labelledby="user-menu" 
       > 
        <a class="dropdown-item" 
         href="#" 
        > 
         <i class="fa fa-fw fa-inbox"></i>&nbsp;Inbox 
        </a> 
        <div class="dropdown-divider"></div> 
        <div class="dropdown-header">Events</div> 
        <a class="dropdown-item" 
         href="#" 
        > 
         <i class="fa fa-fw fa-calendar"></i>&nbsp;All Events 
        </a> 
        <a class="dropdown-item" 
         href="#" 
        > 
       </div> 
      </div> 
     </li> 
    </ul> 
</nav> 
</div> 

Answer 1

私はちょうどクラスdropdown-menu-rightをdropdown-menu要素に追加しなければなりませんでした。

<ul class="nav navbar-nav pull-xs-right"> 
    <li class="nav-item"> 
     <div class="dropdown"> 
      <a class="dropdown-toggle nav-link" 
       id="user-menu" 
       data-toggle="dropdown" 
       aria-haspopup="true" 
       aria-expanded="false" 
       href="#" 
      > 
       <i class="fa fa-user"></i> 
       <span class="hidden-xs-down">&nbsp;Username</span> 
      </a> 
      <div class="dropdown-menu dropdown-menu-right" 
       aria-labelledby="user-menu" 
      > 
       <a class="dropdown-item" 
        href="#" 
       > 

Answer 2

追加の.dropdown-menu-rightクラスを.dropdown-menu要素に追加する必要があります。

 <div class="dropdown-menu dropdown-menu-right" 
      aria-labelledby="user-menu"> 
      <a class="dropdown-item" 
       href="#"> 
       <i class="fa fa-fw fa-wrench"></i>&nbsp;Services 
      </a> 
     </div> 

JSfiddle here