带有下拉位置问题的 Bootstrap 4-alpha-2 导航栏答案

【问题标题】：Bootstrap 4-alpha-2 navbar with dropdown position issues带有下拉位置问题的 Bootstrap 4-alpha-2 导航栏
【发布时间】：2016-07-17 06:57:45
【问题描述】：

上面是使用 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>

【问题讨论】：

标签： css twitter-bootstrap navbar nav bootstrap-4

【解决方案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="#"
                >

【讨论】：

【解决方案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

【讨论】：

谢谢，在您发布之前几分钟，我刚刚找到了答案。我知道 v4 文档仍处于 alpha 阶段，但缺少好的示例。