Css 带下拉位置问题的引导4-alpha-2导航栏

上面是一个屏幕截图，其中带有内置于OSX上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>

事件

我只需将class

下拉菜单右键添加到下拉菜单元素中

<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="#"
                >

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



您应该在.dropdown menu元素中添加额外的.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="#"
                >

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



jshiddle
谢谢，在你发布之前几分钟，我刚刚找到了答案。我知道v4文档仍然是alpha文档，但它们缺少好的示例。