2017-08-25 68 views
0

我想我的導航欄分成左,右導航欄。望着引導的例子後,我以爲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應該是正確的對齊。

回答

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

+0

好像我簡化我的例子太多了。當你將'class =「navbar-collapse collapse」'應用到navbar-menu-right-side div時,它仍然不起作用。任何想法爲乾淨的解決方案? – kentor

+0

你只是想讓右側崩潰?觸發器代碼的其餘部分在哪裏。 – ZimSystem

+0

是的,只有右側應該崩潰(我也更新了小提琴)。我還在切換按鈕的內部添加了span標籤,但由於某種原因它沒有顯示出來。 – kentor

0

你想是這樣的: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>