具有下拉位置问题的Bootstrap 4-alpha-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添加到下拉菜单元素。

<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元素中添加额外的.dropdown-menu-right类。

        <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