保持下拉菜单（语言选择器）始终显示在Bootstrap 4中导航的右侧

Question

我想在汉堡包按钮前放下一个下拉菜单。挑战在于即使导航栏崩溃也能在同一个地方看到它。 即使我将它置于折叠导航栏崩溃div之外，它总是会与其他导航元素一起崩溃。 有没有比位置更好的解决方案：绝对？ ＆lt; nav class =＆＃34; navbar navbar-expand-lg navbar-light fixed-top＆＃34; ID =＆＃34;导航栏＆＃34;＆GT;     ＆lt; a class =＆＃34; navbar-brand＆＃34; HREF =＆＃34;＃＆＃34;＆GT;         ＆lt; img src =＆＃34;＃＆＃34; ALT =＆＃34;＆＃34; ID =＆＃34;标志＆＃34;＆GT;     ＆LT; / A＆GT;     ＆lt; button class =＆＃34; navbar-toggler汉堡包汉堡包 - 滑块＆＃34;类型=＆＃34;按钮＆＃34;数据肘节=＆＃34;崩＆＃34;数据目标=＆＃34;＃navbarSupportedContent＆＃34; ID =＆＃34; toggleNav＆＃34;＆GT; ＆lt; span class =＆＃34; hamburger-box＆＃34;＆gt; ＆lt; span class =＆＃34; hamburger-inner＆＃34; ＆GT;＆LT; /跨度＆GT; ＆LT; /跨度＆GT;     ＆LT; /按钮＆GT;     ＆lt; div class =＆＃34; language-picker＆＃34;＆gt;         ＆lt; ul class =＆＃34; navbar-nav ml-auto＆＃34;＆gt;                   ＆lt; li class =＆＃34; nav-item下拉＆＃34;＆gt;                 ＆lt; a class =＆＃34; nav-link下拉切换＆＃34; HREF =＃＆34;的index.html＆＃34; ID =＆＃34; navbarDropdown＆＃34;角色=＆＃34;按钮＆＃34;数据肘节=＆＃34;下拉＆＃34;咏叹调-haspopup =＆＃34;真＆＃34;咏叹调膨胀=＆＃34;假＆＃34;＆GT;语言                 ＆LT; / A＆GT;                 ＆lt; div class =＆＃34; dropdown-menu＆＃34;咏叹调-labelledby =＆＃34; navbarDropdown＆＃34;＆GT;                     ＆lt; a class =＆＃34; dropdown-item＆＃34; HREF =＆＃34;＃＆＃34;＆GT;英语＆LT; / A＆GT;                     ＆lt; a class =＆＃34; dropdown-item＆＃34; HREF =＆＃34;＃＆＃34;＆GT;法语＆LT; / A＆GT;                     ＆lt;！ - ＆lt; div class =＆＃34; dropdown-divider＆＃34;＆gt;＆lt; / div＆gt;               ＆lt; a class =＆＃34; dropdown-item＆＃34; href =＆＃34;＃＆＃34;＆gt;最佳解决方案＆lt; / a＆gt; - ＆GT;             ＆LT; / DIV＆GT;             ＆LT; /锂＆GT;         ＆LT; / UL＆GT;     ＆LT; / DIV＆GT;     ＆lt; div class =＆＃34; collapse navbar-collapse＆＃34; ID =＆＃34; navbarSupportedContent＆＃34;＆GT;         ＆lt; ul class =＆＃34; navbar-nav mx-auto＆＃34;＆gt;             ＆lt; li class =＆＃34; nav-item＆＃34;＆gt;                 ＆lt; a class =＆＃34; nav-link＆＃34; HREF =＆＃34;＃＆＃34;＆GT;＆LT;跨度＆GT;联络与LT; /跨度＆GT;＆LT; / A＆GT;             ＆LT; /锂＆GT;             ＆lt; li class =＆＃34; nav-item＆＃34;＆gt;                 ＆lt; a class =＆＃34; nav-link＆＃34; HREF =＆＃34;＃＆＃34;＆GT;＆LT;跨度＆GT; LOGIN＆LT; /跨度＆GT;＆LT; / A＆GT;             ＆LT; /锂＆GT;             ＆lt; li class =＆＃34; nav-item＆＃34;＆gt;                 ＆lt; a class =＆＃34; nav-link chatIcon＆＃34; href =＆＃34;＃＆＃34;＆gt;＆lt; img src =＆＃34; img / icons / account_icon.png＆＃34; alt =＆＃34;聊天图标＆＃34;＆gt;＆lt; / a＆gt;             ＆LT; /锂＆GT;         ＆LT; / UL＆GT;         ＆LT; / DIV＆GT;         ＆lt;！ - end collapse navbar-collapse - ＆gt; ＆LT; / NAV＆GT;

Answer 1

将下拉列表和切换器一起包裹在1 div ...

中

https://www.codeply.com/go/H19BTH57m4

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">
    <a class="navbar-brand" href="#">
        <img src="//placehold.it/30" alt="" id="logo">
    </a>
    <div class="d-flex flex-row">
        <div class="language-picker">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle mr-2" href="index.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language
                </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">English</a>
                        <a class="dropdown-item" href="#">French</a>
                        <!-- <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">THE BEST SOLUTION</a> -->
                    </div>
                </li>
            </ul>
        </div>
        <button class="navbar-toggler hamburger hamburger--slider" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" id="toggleNav">
            <span class="hamburger-box navbar-toggler-icon">
            <span class="hamburger-inner"></span>
            </span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"><span>CONTACT</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>LOGIN</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link chatIcon" href="#"><img src="//placehold.it/30" alt="a chat icon"></a>
            </li>
        </ul>
    </div>
    <!-- end collapse navbar-collapse -->
</nav>

另一种选择是在下拉列表中使用ml-auto，然后将其从navbar-nav：https://www.codeply.com/go/rtmowu5Bl9

中删除