Bootstrap 4 navbar with 2 rows

Question

我已經創建了一個帶有Bootstrap 4 Alpha 6的導航欄，左側有一個大品牌/圖標，並且2個navbar-nav的鏈接位於圖標右側。一個導航有鏈接，另一個導航有圖標。除了一件事外，它的工作方式與我想要的完全相同。

我希望2個導航欄出現在圖標右側的兩個單獨的行中。像這樣：

------------------------------------------------------ 
       link link link link 
brand-icon ------------------------------------------- 
       icon icon icon 
------------------------------------------------------ 

移動版本仍然會像現在一樣垂直顯示鏈接。我已經用Flexbox嘗試了幾個不同的東西，但無法使其工作。

這裏是我的代碼：

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <div class="container"> 
     <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1> 
     <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Product</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Shop</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Events</a> 
       </li> 
      </ul> 
      <ul class="navbar-nav"> 
       <li class="nav-item"> 
        <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

可以使用flex-column Flexbox的實用工具類來堆疊2倍的NAV垂直圖標旁邊。這在navbar-collapse div上設置flex-direction: column，以便它是垂直的子元素堆棧。

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <div class="container"> 
     <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1> 
     <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Product</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Shop</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Events</a> 
       </li> 
      </ul> 
      <ul class="navbar-nav flex-row mb-2"> 
       <li class="nav-item"> 
        <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Demo - Bootstrap 4 navbar with 2 rows

---

這裏是與2行另一個變化和右對齊搜索表單：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand my-auto" href="#">Brand</a> 
    <div class="collapse navbar-collapse flex-md-column" id="navbarCollapse"> 
     <ul class="navbar-nav ml-auto small"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Shop</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Products</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Team</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">About</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Events</a> 
      </li> 
     </ul> 
     <form class="form-inline ml-auto"> 
      ... 
     </form> 
    </div> 
</nav> 

Demo - Navbar with 2 rows on right

---

更新引導4.0.0：
https://www.codeply.com/go/05hEHoiUvv

這裏是2 navbars with one mobile toggler

Answer 2

備選方案的 「與2排變化右對齊」 沒有右爲我對齊Safari中的行。我把無序列表放在一個新的div中，其中flex-column和ml-auto類。

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <div class="container"> 
     <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> 
     <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1> 
     <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse"> 
     <div class="flex-column ml-auto"> 
      <ul class="navbar-nav"> 
      <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">Product</a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> 
      </ul> 
      <ul class="navbar-nav"> 
      <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li> 
      <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li> 
      <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </nav>