Question

我想将导航栏拆分为左右导航栏。在查看bootstrap示例之后，我认为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：https://jsfiddle.net/bvzvo05d/7/

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

期望的结果：

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

Answer 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

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

导航栏中的Mr-auto与div

2 个答案: