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

我只需要将 class 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 class。

        <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

Bootstrap 4-alpha-2 导航栏有下拉位置问题

Bootstrap 4-alpha-2 navbar with dropdown position issues

css

nav

navbar

twitter-bootstrap

bootstrap-4