Mr-Auto in Navbar mit divs

Ich möchte meine Navbar in linken und rechten Navbars teilen. Nach dem Betrachten der Bootstrap-Beispiele dachte ich, dass mr-auto genau das ist, was ich brauche, aber es funktioniert nicht wie gewünscht, wenn ich einen Container innerhalb von der Navbar verwende. Ich möchte jedoch das Containerelement innerhalb der Navigationsleiste verwenden, während ich eine Hintergrundfarbe für die Navigationsleiste mit voller Breite anwende.Mr-Auto in Navbar mit divs

Mein HTML-Code:

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

Edit: Aktualisiert JSFiddle, zur Kenntnis nehmen, dass Home2 ein Kollabieren Element ist, Ansichtsfenster muss in JSFiddle vergrößert werden um das Element zu sehen.

Gewünschtes Ergebnis:

Die div die Home1 Link zeigt soll auf der linken Seite und die Home2 div sollte ausgerichtet sein rechts platziert werden.

Quelle

2017-08-25 kentor

Das Problem ist, dass die d-flex DIV nicht volle Breite der container verbraucht. verwenden w-100 Nur um es zu 100% Breite zu machen ..

<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

Quelle

2017-08-25 11:31:02 ZimSystem

scheint, wie ich mein Beispiel zu viel vereinfacht. Wenn Sie 'class =" navbar-collapse collapse "' auf das Navbar-Menü-rechte-Seite-Div anwenden, funktioniert es immer noch nicht. Irgendwelche Ideen für eine saubere Lösung? – kentor

Sie wollen nur die richtige Seite zusammenbrechen? Wo ist der Rest des Toggler-Codes? – ZimSystem

Ja genau, nur die rechte Seite soll zusammenbrechen (ich habe auch die Geige aktualisiert). Ich habe auch das Span-Tag innerhalb der Umschalttaste hinzugefügt, aber es wird aus irgendeinem Grund nicht angezeigt. – kentor

Mögen Sie diese wollen: 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>

Quelle

2017-08-25 11:32:00

Mr-Auto in Navbar mit divs

Antwort

Verwandte Themen