MR-汽车导航栏中与div的

我想我的导航栏分成左，右导航栏。望着引导的例子后，我以为MR-auto是我需要什么，但根据需要，当我用一个容器内导航栏的这是行不通的。但是，我想使用导航栏内的容器元素，因为我正在为全宽导航栏应用背景色。MR-汽车导航栏中与div的

我的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，请注意该家庭2是一个崩溃的项目，视口必须的jsfiddle被放大到看到该项目。

期望的结果：

表示HOME1链路在div应放在左边和家庭2 DIV应该是正确的对齐。

来源

2017-08-25 kentor

的问题是，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

来源

2017-08-25 11:31:02 ZimSystem

好像我简化我的例子太多了。当你将'class =“navbar-collapse collapse”'应用到navbar-menu-right-side div时，它仍然不起作用。任何想法为干净的解决方案？ – kentor

你只是想让右侧崩溃？触发器代码的其余部分在哪里。 – ZimSystem

是的，只有右侧应该崩溃（我也更新了小提琴）。我还在切换按钮的内部添加了span标签，但由于某种原因它没有显示出来。 – kentor

你想是这样的：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>

来源

2017-08-25 11:32:00

MR-汽车导航栏中与div的

回答

相关问题