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的

回答

相關問題