如何使用Flexbox在Bootstrap 4中居中导航栏
问题描述:
那么,我想要实现这件事:https://i.imgur.com/BDM7JvD.jpg使用Bootstrap 4导航栏。如何使用Flexbox在Bootstrap 4中居中导航栏
如何使用flexbox或mr-auto等公用程序集中视口中间的导航链接/项目。我试图避免使用基于CSS的定位方法,因为它可能会在不同的设备上显示。但是,如果CSS方法承诺处于相同的集中位置,那么为什么不呢!
注意:某些ppl可能会说使用justify实用程序,但是您不能将它们用作navbar品牌,并且navbar-nav不能包装在div中。如果我这样做,布局混乱了。
导航类= “导航栏导航栏,可切换-MD导航栏光BG-定制卡阴影下”>
<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>
答
使用Flexbox的工具来对齐组件你想要的方式。
<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>
http://www.codeply.com/go/kTGlK9Axdk
更新引导4.0.0
navbar-toggleable-sm
现在navbar-expand-md
navbar-inverse
现在是navbar-dark
navbar-fixed-top
现在fixed-top
+0
谢谢,正是我想要的 –
我编辑了qs,我试图添加先生和ml - 汽车,但它不工作。此外,我还试图通过包装品牌div和nav-item div来使用网格,但随后导航项被强制转到下一行。帮助 –
代码与图像不匹配。怎么样在右边的图标?看起来你刚刚从文档中粘贴了navbar示例。 – ZimSystem
我给出的图像来自于我正在尝试实现的模板...没有颜色和样式,只是该导航栏的布局。 –