带 2 行的 Bootstrap 4 导航栏

Question

我创建了一个带有 Bootstrap 4 alpha 6 的导航栏，左侧有一个大品牌/图标，图标右侧有 2 个导航栏导航。一个导航有链接，另一个导航有图标。它完全按照我的意愿工作，除了一件事。

我希望 2 个导航栏出现在图标右侧的 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>

原文由 Tom Michew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 flex-column flexbox 实用程序类将 2 个导航垂直堆叠在图标旁边。这会在 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>

演示 - 带 2 行的 Bootstrap 4 导航栏

---

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

演示 - 右侧有 2 行的导航栏

---

Bootstrap 4.0.0 更新：

https://www.codeply.com/go/05hEHoiUvv

这是一个带有 2 个导航栏和一个移动切换 器的替代方案

---

Bootstrap 4.0 - 两个导航栏折叠成一个切换

如何将品牌和导航栏放在不同的行上？

如何在导航栏中的“导航栏品牌”下移动“导航”元素

如何使用引导程序 4 将导航栏放置在粘性导航栏下方？

Bootstrap 4 多个固定顶部导航栏

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议