добавления компонентов, прежде чем гамбургер bootstrap4

Question

У меня Navbar в Bootstrap 4:

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

, и я хочу сделать что переключатель языка ссылка будет перед «MENU» гамбургером, является это возможно ?: LINK

Любые идеи, как я могу это сделать? Я не смог найти решение.

Answer 1

• Сделать ulabsolute и поместите его с top и right координат.
• Установите ul и li - inline-block.

Пример ниже:

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>