Bootstrap 4导航栏，有2行

Question

Bootstrap 4导航栏，有2行

我创建了一个带有Bootstrap 4 alpha 6的导航栏，左侧有一个大品牌/图标，还有2个navbar-nav，带有图标右侧的链接。一个导航有链接，另一个导航有图标。除了一件事，它正如我想要的那样工作。

我希望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">

Answer 1

您可以使用flex-columnflexbox实用程序类在图标旁边垂直堆叠2个导航。这将flex-direction: column在navbar-collapsediv中，它的子元素垂直堆叠。<nav&nbsp;class="navbar&nbsp;navbar-toggleable-md&nbsp;navbar-inverse&nbsp;bg-inverse"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;class="navbar-toggler&nbsp;navbar-toggler-right&nbsp;align-self-center&nbsp;mt-3"&nbsp;type="button"&nbsp;data-toggle="collapse"&nbsp;data-target="#navbarCollapse"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="navbar-toggler-icon"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1&nbsp;class="py-2&nbsp;ml-lg-2&nbsp;mx-3"><a&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-envelope-o&nbsp;fa-lg&nbsp;mt-2"&nbsp;aria-hidden="true"></i></a></h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="collapse&nbsp;navbar-collapse&nbsp;flex-column&nbsp;ml-lg-0&nbsp;ml-3"&nbsp;id="navbarCollapse"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="navbar-nav"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item&nbsp;active"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Home</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Product</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Shop</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Events</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="navbar-nav&nbsp;flex-row&nbsp;mb-2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link&nbsp;py-1&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-facebook"></i></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link&nbsp;py-1&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-instagram"></i></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link&nbsp;py-1&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-twitter"></i></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></nav>演示 - 带有2行的Bootstrap 4导航栏这是另一个带有2行和右对齐搜索形式的变体：&nbsp;<nav&nbsp;class="navbar&nbsp;navbar-toggleable-md&nbsp;navbar-light&nbsp;bg-faded"> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;class="navbar-toggler&nbsp;navbar-toggler-right"&nbsp;type="button"&nbsp;data-toggle="collapse"&nbsp;data-target="#navbarCollapse"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="navbar-toggler-icon"></span> &nbsp;&nbsp;&nbsp;&nbsp;</button> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="navbar-brand&nbsp;my-auto"&nbsp;href="#">Brand</a> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="collapse&nbsp;navbar-collapse&nbsp;flex-md-column"&nbsp;id="navbarCollapse"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="navbar-nav&nbsp;ml-auto&nbsp;small"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item&nbsp;active"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Shop</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Products</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Team</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Events</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<form&nbsp;class="form-inline&nbsp;ml-auto"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</form> &nbsp;&nbsp;&nbsp;&nbsp;</div></nav>演示 - 右侧有2行的Navbar

Answer 2

对于我来说，“2行右对齐的变化”没有正确对齐Safari中的行。我将无序列表放在带有flex-column和ml-auto类的新div中。<nav&nbsp;class="navbar&nbsp;navbar-toggleable-md&nbsp;navbar-inverse&nbsp;bg-inverse"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;class="navbar-toggler&nbsp;navbar-toggler-right&nbsp;align-self-center&nbsp;mt-3"&nbsp;type="button"&nbsp;data-toggle="collapse"&nbsp;data-target="#navbarCollapse">&nbsp;<span&nbsp;class="navbar-toggler-icon"></span>&nbsp;</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1&nbsp;class="py-2&nbsp;ml-lg-2&nbsp;mx-3"><a&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-envelope-open-o&nbsp;fa-lg"&nbsp;aria-hidden="true"></i></a></h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="collapse&nbsp;navbar-collapse&nbsp;ml-lg-0&nbsp;ml-3"&nbsp;id="navbarCollapse"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="flex-column&nbsp;ml-auto"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="navbar-nav"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item&nbsp;active">&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Home</a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Product</a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Shop</a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">About</a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link"&nbsp;href="#">Events</a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="navbar-nav"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-facebook"></i></a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-instagram"></i></a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="nav-item">&nbsp;<a&nbsp;class="nav-link&nbsp;pr-3"&nbsp;href="#"><i&nbsp;class="fa&nbsp;fa-twitter"></i></a>&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</nav>