添加組件漢堡bootstrap4

我有一個導航欄在引導4：添加組件漢堡bootstrap4

<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

任何想法，我可以做到這一點？我一直無法找到解決方案。

來源

2017-01-08 Adam Novotný

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

來源

2017-01-08 16:48:09 Syden

添加組件漢堡bootstrap4

回答

相關問題