2行のブートストラップ4 navbar

Question

私は、左に大きなブランド/アイコンを持つBootstrap 4アルファ6と、アイコンの右側にリンクした2つのnavbar-navを持つnavbarを作成しました。 1つのナビゲーションにはリンクがあり、もう1つのナビゲーションにはアイコンがあります。それは私が1つのことを除いてほしいと正確に働いています。

2つのナビゲーションバーをアイコンの右側の2つの別々の行に表示したいとします。このように：それが今そうであるよう

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

モバイル版はまだ縦のリンクが表示されます。フレックスボックスでいくつかのことを試しましたが、動作させることはできません。

<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

あなたは垂直アイコンの横に2つのNAVを積層するflex-columnフレキシボックスユーティリティクラスを使用することができます。

は、ここに私のコードです。これにより、がnavbar-collapse divに設定され、子要素が垂直に積み重なるようになります。

<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行に変化は" 右なかっ2 navbars with one mobile toggler

Answer 2

と代替シナリオであります私のためにSafariの行を整列させてください。私はflex-columnとml-autoクラスを使って、新しいdivに並べ替えられていないリストを入れました。

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