Bootstrap 4 导航栏，有 2 行
[英] Bootstrap 4 navbar with 2 rows
本文介绍了Bootstrap 4 导航栏，有 2 行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个带有 Bootstrap 4 alpha 6 的导航栏，左侧有一个大品牌/图标，还有 2 个导航栏导航，图标右侧有链接.一个导航有链接，另一个导航有图标.除了一件事外，它完全按照我的意愿工作.
我希望 2 个导航栏显示在图标右侧的 2 个单独的行中.像这样:
------------------------------------------------------链接链接链接链接品牌图标-------------------------------------------图标 图标 图标------------------------------------------------------移动版本仍会像现在一样垂直显示链接.我已经用 flexbox 尝试了几种不同的方法，但无法让它工作.
这是我的代码:
<div class="容器"><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><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="#">首页</a><li class="nav-item"><a class="nav-link" href="#">Product</a><li class="nav-item"><a class="nav-link" href="#">商店</a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">事件</a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a><li class="nav-item"><a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a><li class="nav-item"><a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</nav>
解决方案
您可以使用 flex-column flexbox 实用程序类在图标旁边垂直堆叠 2 个导航.这会在 navbar-collapse div 上设置 flex-direction: column 以便它的子元素垂直堆叠.
<div class="容器"><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><h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" 咏叹调-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="#">首页</a><li class="nav-item"><a class="nav-link" href="#">Product</a><li class="nav-item"><a class="nav-link" href="#">商店</a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">事件</a><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 class="nav-item"><a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a><li class="nav-item"><a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</nav>
<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><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="#">商店</a><li class="nav-item"><a class="nav-link" href="#">产品</a><li class="nav-item"><a class="nav-link" href="#">团队</a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">事件</a><form class="form-inline ml-auto">...</表单> </nav>
演示 - 右侧有 2 行的导航栏
<小时>
Bootstrap 4.0.0 更新 :https://www.codeply.com/go/05hEHoiUvv
这是另一种场景，带有 2 个导航栏和一个移动切换器
<小时>
Bootstrap 4.0 - 两个 NavBar 合二为一切换 如何将品牌和导航栏放在不同的行上? 如何在navbar-brand"下移动nav"元素在我的导航栏中 如何使用引导程序 4 将导航栏放置在粘性导航栏下方? Bootstrap 4 多个固定顶部导航栏
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 rows and right align search form:
<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.0.0 :https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 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
这篇关于Bootstrap 4 导航栏，有 2 行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
