本文介绍了如何使用 Flexbox 在 Bootstrap 4 中居中导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
嗯,我想实现这个东西:
使用 Bootstrap 4 导航栏.
如何使用 flexbox 或 .mr-auto
等实用程序将导航链接/项目集中在视口中间.我试图避免基于 CSS 的定位方法,因为它可能会在不同的设备上出现.但是确定如果 CSS 方法承诺处于相同的集中位置,那为什么不呢!
注意:有些人可能会说使用 justify 实用程序,问题是您不能将它们用作 .navbar-brand
和 .navbar-nav
不能包含在
中.如果我这样做,布局就会混乱.
<nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom"><div class="容器"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto mr-auto"><li class="nav-item"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Disabled</a>
</nav>
解决方案
使用 flexbox 实用程序以您想要的方式对齐组件.这里的 justify-content-center
用于将 navbar-nav
居中.
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar"><span class="navbar-toggler-icon"></span><a href="/" class="navbar-brand">品牌</a><div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Link <span class="sr-only">首页</span></a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#" data-toggle="collapse">Link</a>
<ul class="nav navbar-nav flex-row"><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" href=""><i class="fa fa-twitter"></i></a></li></nav>
更多导航栏对齐示例
更新 Bootstrap 4.0.0
navbar-toggleable-sm
现在是 navbar-expand-md
navbar-inverse
现在是 navbar-dark
navbar-fixed-top
现在是 fixed-top
Well, I want to achieve this thing:
using the Bootstrap 4 Navbar.
How can I centralize the nav-links/items in the middle of the viewport using the flexbox or .mr-auto
etc utilities. I am trying to avoid a CSS based positioning approach because it may look off on different devices. But sure if a CSS approach promises to be at the same centralized position then why not!
NOTE: some ppl might say to use the justify utilities, the problem is you can't use them as the .navbar-brand
and the .navbar-nav
can't be wrapped inside a <div>
. If I do so, the layout messes up.
<nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案
Use the flexbox utilities to align components the way you want. Here the justify-content-center
is used to center the navbar-nav
.
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">Brand</a>
<div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse">Link</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav flex-row">
<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" href=""><i class="fa fa-twitter"></i></a></li>
</ul>
</nav>
More Navbar alignment examples
Update Bootstrap 4.0.0
navbar-toggleable-sm
is now navbar-expand-md
navbar-inverse
is now navbar-dark
navbar-fixed-top
is now fixed-top
这篇关于如何使用 Flexbox 在 Bootstrap 4 中居中导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!