Bootstrap 4-alpha-2 navbar mit Drop-Down-Position gibt

Question

über einen Screenshot mit dem ansprechenden Design Feature eingebaut in Safari auf OS X. Below ist, ist der Code verwendet, um die navbar zu erzeugen, wie können Sie Das Dropdown-Menü auf der rechten Seite wird nicht auf der Seite angezeigt. Wie kann ich das verhindern?

<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

Ich hatte gerade die Klasse dropdown-menu-right auf das Dropdown-Menü Element hinzuzufügen.

<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

Sie sollten Ihrem .dropdown-Menüelement eine zusätzliche .dropdown-menu-right-Klasse hinzufügen.

 <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