相关疑难解决方法(0)

我创建了一个带有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"> …