Bootstrap 4导航栏，带2行

Question

我已经创建了一个带有Bootstrap 4 alpha 6的导航栏，它的左侧有一个大的品牌/图标，2个导航栏-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">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

可以使用flex-column flexbox工具类在图标旁边垂直堆叠两个导航。这将在navbar-collapse目录上设置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>

Demo - Bootstrap 4 navbar with 2 rows

这是2行和right align搜索表单的另一个变体：

​

<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

Bootstrap 4.0.0的更新

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

以下是2 navbars with one mobile toggler的另一种方案

Bootstrap 4.0 - Two NavBars that collapse into one toggle

How can I have Brand and Navbar on separate lines?

How move 'nav' element under 'navbar-brand' in my Navbar

How to place navbar below sticky navbar using bootstrap 4?

Bootstrap 4 Multiple fixed-top navbars

Answer 2

在Safari中，“2行右对齐的变体”并没有为我实现右对齐。我使用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>