引导4导航，左侧切换与右侧按钮排除移动崩溃？

Question

我试图有一个可折叠的引导4导航与切换按钮在左侧。这不是问题，但我也尝试在导航的右侧设置一个动作按钮(或按钮)。

如何才能在右边的按钮/链接被排除在肚脐折叠菜单。此外，如何避免在展开时按下这些项目的导航条折叠菜单？我可以浮动正确的按钮，但这也会引起问题。

请参阅图片：

​

​

当前实现的Live示例：https://www.codeply.com/go/IDCOYUVXCH

Answer 1

你得用像这样的柔韧盒.

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

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
    <div class="container d-flex flex-row flex-md-nowrap flex-wrap">
    <a href="#" class="hidden-lg-up my-2 mr-3" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false">
        <i class="fa fa-bars text-white"></i>
    </a>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="navbar-collapse collapse flex-md-unordered flex-last" id="navbarCollapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex ml-auto">
         <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
    <div class="hidden-md-up w-100"><!--hidden spacer to force wrap--></div>
    </div>
</nav>

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