Bootstrap 4 navbar与2行

本文介绍了Bootstrap 4 navbar与2行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个带有Bootstrap 4 alpha 6的导航栏，在左侧有一个大的品牌/图标，以及2个navbar-nav的图标右侧的链接。一个导航有链接，另一个导航有图标。它的工作方式与我想要的完全一样，除了一件事。

我希望2个导航栏出现在图标右侧的两个单独的行中。像这样：

  ----------------------- ------------------------------- 
链接链接链接链接
 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-3type =buttondata-toggle =collapsedata-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- lgaria-hidden =true>< / i>< / a>< / h1> 
< div class =collapse navbar-collapse ml-lg-0 ml-3id =navbarCollapse> 
< ul class =navbar-nav> 
< li class =nav-item active> 
< a class =nav-linkhref =＃>主页< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>产品< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>商店< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>关于< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>事件< / a> 
< / li> 
< / ul> 
< ul class =navbar-nav> 
< li class =nav-item> 
< a class =nav-link pr-3href =＃>< i class =fa fa-facebook>< / i>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-link pr-3href =＃>< i class =fa fa-instagram>< / i>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-link pr-3href =＃>< i class =fa fa-twitter>< / i>< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / nav>

解决方案您可以使用 flex -column flexbox实用程序类将2个导航垂直堆叠在图标旁边。这会在 navbar-collapse div上设置 flex-direction：column ，以便它是垂直的子元素堆栈。

$ b

下面是另一个与2行align right ：

 < nav class =navbar navbar -tableable-md navbar-light bg-faded> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarCollapse> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a class =navbar-brand my-autohref =＃>品牌< / a> 
< div class =collapse navbar-collapse flex-md-columnid =navbarCollapse> 
< ul class =navbar-nav ml-auto small> 
< li class =nav-item active> 
< a class =nav-linkhref =＃>商店< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>产品< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>团队< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>关于< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>事件< / a> 
< / li> 
< / ul> 
< form class =form-inline ml-auto> 
 ... 
< / form> 
< / div> 
< / nav>

Bootstrap 4 Beta ：

以下是另一个场景，

I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.

I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:

------------------------------------------------------
               link link link link
brand-icon -------------------------------------------
               icon icon icon
------------------------------------------------------

The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.

Here is my code:

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

解决方案

You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.

<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

Here's another variation with the 2 row aligned right:

<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

Update for Bootstrap 4 Beta:
https://www.codeply.com/go/05hEHoiUvv

Here is an alternate scenario with 2 navbars with one mobile toggler

这篇关于Bootstrap 4 navbar与2行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..