Hinzufügen von Komponenten vor Hamburger bootstrap4

Question

ich eine navbar in Bootstrap 4 haben:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header class="row"> 
 
    <div class="w-100"> 
 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span> 
 
     </button> 
 

 
     <a class="navbar-brand" href="#"> 
 
     <img src="../img/svg/stopa-logo.svg" width="120"> 
 
     </a> 
 

 
     <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav menu-margined-right"> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Missions</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">About Us</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">We Support</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Contact Us</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <ul class="nav navbar-nav lang-right"> 
 
     <li class="nav-link"> 
 
      <a class="nav-item" href="#">CZ</a> 
 
     </li> 
 
     <li class="nav-link"> 
 
      <a class="nav-item" href="#">EN</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

und ich möchte, dass die Sprachumschaltung Links vor "MENU" Burger sein wird, ist dies möglich ?: LINK

Irgendwelche Ideen, wie ich das tun kann? Ich habe keine Lösung gefunden.

Answer 1

• Machen ulabsolute und legen Sie sie mit top und right Koordinaten.
• Stellen Sie sowohl als auch li auf inline-block ein.

Beispiel unten:

ul.nav.navbar-nav.lang-right { 
 
    position: absolute; 
 
    right: 160px; 
 
    top: 7px; 
 
    display: inline-block; 
 
} 
 
li.nav-link { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<header class="row"> 
 
    <div class="w-100"> 
 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span> 
 
     </button> 
 

 
     <a class="navbar-brand" href="#"> 
 
     <img src="../img/svg/stopa-logo.svg" width="120"> 
 
     </a> 
 

 
     <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav menu-margined-right"> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Missions</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">About Us</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">We Support</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Contact Us</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <ul class="nav navbar-nav lang-right"> 
 
     <li class="nav-link"> 
 
      <a class="nav-item" href="#">CZ</a> 
 
     </li> 
 
     <li class="nav-link"> 
 
      <a class="nav-item" href="#">EN</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>