问题描述
好吧,我想要实现这个目标:使用Bootstrap 4导航栏。
如何使用flexbox或mr-auto等在视口中间集中导航链接/项目公用事业。我试图避免使用基于CSS的定位方法,因为它可能会在不同的设备上显示。但确定如果一个CSS方法承诺在相同的集中位置,那么为什么不呢!
注意:有些ppl可能会说使用justify实用程序,prom是你无法将它们用作navbar品牌,并将navbar-nav不能包裹在div中。如果我这样做的话,布局就会混乱。
nav class =navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom>
< div class =container>
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =#navbarSupportedContentaria-controls =navbarSupportedContent aria-expanded =falsearia-label =切换导航>
< span class =navbar-toggler-icon>< / span>
< / button>
< a class =navbar-brandhref =#>< img src =img / nav-logo.pngalt =logoclass =nav-logo >< / A>
< div class =collapse navbar-collapseid =navbarSupportedContent>
< ul class =navbar-nav ml-auto mr-auto>
< 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>
< / div>
< / div>
< / 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-righttype =buttondata-toggle =collapsedata-target =#collapsingNavbar>
< span class =navbar-toggler-icon>< / span>
< / button>
< a href =/class =navbar-brand>品牌< / a>
< div class =navbar-collapse collapse justify-content-centerid =collapsingNavbar>
< ul class =navbar-nav>
< li class =nav-item active>
< a class =nav-linkhref =#>连结< span class =sr-only>主页< / span>< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =#>连结< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =#data-toggle =collapse>连结< / a>
< / li>
< / ul>
< / div>
< ul class =nav navbar-nav flex-row>
< li class =nav-item>< a class =nav-link pr-3href =>< i class =fa fa-facebook>< / I>< / A>< /锂>
< li class =nav-item>< a class =nav-linkhref =>< i class =fa fa-twitter>< / i> < / A>< /锂>
< / ul>
< / nav>
$ b 更新引导4.0.0
navbar-toggleable-sm
现在 navbar-expand-md
现在 navbar-dark
navbar-fixed -top
现在固定顶部
Well, I want to achieve this thing: https://i.imgur.com/BDM7JvD.jpg 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 prom is you cant use them as the navbar-brand and the navbar-nav cant 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中居中导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!