webdevqa.jp.net

Bootstrap 2行の4つのnavbar

左側に大きなブランド/アイコンがあるBootstrap 4 alpha 6、およびアイコンの右側にリンクがある2つのnavbar-navを含むnavbarを作成しました。 1つのnavにはリンクがあり、もう1つのnavにはアイコンがあります。一つのことを除いて、私が望むように正確に機能しています。

アイコンの右側にある2つの別々の行に2つのnavbarを表示したいです。このような:

------------------------------------------------------
               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>
28
Tom Michew

flex-column flexboxユーティリティクラスを使用して、アイコンの横に2つのnavを垂直に積み重ねることができます。これにより、flex-direction: column divにnavbar-collapseが設定され、子要素が垂直にスタックされます。

enter image description here

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

デモ-Bootstrap 2行の4 navbar


次に、2行とrightalign検索フォームの別のバリエーションを示します。 enter image description here

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

デモ-右側に2行のNavbar


Bootstrap 4.0.0の更新:
https://www.codeply.com/go/05hEHoiUvv

2つのnavbarsと1つのモバイルトグル を使用した代替シナリオを次に示します。


ブートストラップ4.0-1つのトグルに折りたたまれた2つのNavBar
ブランドとナビゲーションバーを別々の行に配置するにはどうすればよいですか
Navbarの 'navbar-brand'の下で 'nav'要素を移動する方法
bootstrap 4を使用してnavbarをスティッキーnavbarの下に配置する方法
ブートストラップ4複数の固定トップナビゲーションバー

24
Zim

「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>
2
zackfett