Html 带divs的导航栏中的Mr auto

我想将导航栏分为左导航栏和右导航栏。在查看引导示例后，我认为mr auto正是我所需要的，但是当我在导航栏中使用容器时，它并没有按预期工作。但是，我希望在为全宽导航栏应用背景色时使用导航栏内部的容器元素

我的HTML代码：

<nav class="navbar navbar-grey navbar-expand-lg">
   <div class="container">
      <a class="navbar-brand" href="/"><img class="rounded logo" src="http://www.m2kindia.com/wp-content/uploads/2016/07/dummy-logo.png"></a><button class="navbar-toggler"></button>
      <div class="d-flex" id="navbar-menu">
         <div class="mr-auto" id="navbar-menu-left-side">
            <ul class="navbar-nav">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home1</a></li>
            </ul>
         </div>
         <div class="collapse navbar-collapse" id="navbar-menu-right-side">
            <ul class="nav navbar-nav action-links">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home2</a></li>
            </ul>
         </div>
      </div>
   </div>
</nav>

JSFiddle：

编辑：更新了JSFIDLE，请注意Home2是一个正在折叠的项目，必须在JSFIDLE中放大视口才能看到该项目

所需结果：

<nav class="navbar navbar-grey navbar-expand-lg">
   <div class="container">
      <a class="navbar-brand" href="/"><img class="rounded logo" src="http://www.m2kindia.com/wp-content/uploads/2016/07/dummy-logo.png"></a><button class="navbar-toggler"></button>
      <div class="d-flex" id="navbar-menu">
         <div class="mr-auto" id="navbar-menu-left-side">
            <ul class="navbar-nav">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home1</a></li>
            </ul>
         </div>
         <div class="collapse navbar-collapse" id="navbar-menu-right-side">
            <ul class="nav navbar-nav action-links">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home2</a></li>
            </ul>
         </div>
      </div>
   </div>
</nav>

---

显示Home1链接的div应该放在左侧，Home2 div应该右对齐。

问题在于

d-flex

div没有占用

容器的全部宽度。只需使用
w-100
将其设置为100%宽度

<nav class="navbar navbar-grey navbar-expand-lg">
   <div class="container">
      <a class="navbar-brand" href="/"><img class="rounded logo" src="http://www.m2kindia.com/wp-content/uploads/2016/07/dummy-logo.png"></a><button class="navbar-toggler"></button>
      <div class="d-flex w-100" id="navbar-menu">
         <div class="mr-auto" id="navbar-menu-left-side">
            <ul class="navbar-nav">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home1</a></li>
            </ul>
         </div>
         <div id="navbar-menu-right-side">
            <ul class="nav navbar-nav action-links">
               <li class="nav-item"><a class="nav-item nav-link" href="/">Home2</a></li>
            </ul>
         </div>
      </div>
   </div>
</nav>









您想这样做吗：








我似乎过于简化了我的示例。当您将
class=“navbar collapse collapse”
应用到导航栏菜单右侧div时，它仍然不起作用。有什么干净的解决方案吗？你只是想让右面崩溃？其余的切换代码在哪里。是的，确实如此，只有右侧应该折叠（我还更新了小提琴）。我还将span标记添加到了切换按钮的内部，但由于某种原因它没有显示出来。