Mr-auto 在带有 div 的导航栏中答案

【问题标题】：Mr-auto in navbar with divsMr-auto 在带有 div 的导航栏中
【发布时间】：2017-08-25 20:13:11
【问题描述】：

我想将我的导航栏分成左右导航栏。在查看了引导示例后，我认为 mr-auto 正是我所需要的，但是当我使用导航栏 inside 的容器时，它并不能正常工作。但是，我想在导航栏内使用容器元素，因为我正在为全宽导航栏应用背景色。

我的 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：https://jsfiddle.net/bvzvo05d/7/

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

期望的结果：

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

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

问题是d-flex DIV 没有占用container 的全宽。只需使用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>

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

【讨论】：

好像我简化了我的例子太多了。当您将 class="navbar-collapse collapse" 应用于 navbar-menu-right-side div 时，它仍然不起作用。对干净的解决方案有什么想法吗？
你只是想让右侧折叠？切换器代码的其余部分在哪里。
是的，只有右侧应该折叠（我还更新了小提琴）。我还在切换按钮内添加了 span 标签，但由于某种原因它没有显示出来。

【解决方案2】：

你想要这样吗：Updated Fiddle

<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" style='width: 50%;'>

         <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>

【讨论】：