如何在 Bootstrap 中居中导航项目?
[英] How to center nav-items in Bootstrap?
本文介绍了如何在 Bootstrap 中居中导航项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我想根据 Bootstrap 4 中的浏览器窗口大小将导航栏上的导航项(链接)居中怎么办.看一下代码:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>按钮><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="#">功能</a><a class="nav-item nav-link" href="#">定价</a><a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
现在我想根据浏览器宽度将 div "navbar-nav" 居中.我尝试过的一件事是给它 mr-auto 和 ml-auto,这似乎确实使它居中,但并不完全如此.它实际执行的操作是根据宽度浏览器窗口宽度 - 徽标宽度"将其居中.我希望它正好在屏幕中间居中.
我也尝试将位置更改为绝对位置,但在折叠模式下同样会弄乱布局.
解决方案
响应式地使用 flexbox 和边距工具...
引导程序 4 alpha 6
编辑..
答案仍然基本相同.使用 mx-auto
居中.
http://codeply.com/go/mycC5z8lpJ(中心链接,品牌左侧)>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>按钮><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav mx-auto"><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a><a class="nav-link" href="#">功能</a><a class="nav-link" href="#">定价</a><a class="nav-link disabled" href="#">Disabled</a>
</nav>
如果您希望链接完全在视口中居中,请参阅此处的第二个示例:http://www.codeply.com/go/RCBftzZCD8
其他 Bootstrap 4 导航栏对齐示例
另见...
将 Bootstrap 4 导航栏中的元素居中
中心导航栏没有品牌的链接在 Bootstrap 4 中将其推到右侧?
如何使用 Flexbox 在 Bootstrap 4 中居中导航栏
如何在 Bootstrap 4 中定位导航栏内容
Bootstrap 4 导航栏对齐徽标中心和左侧的切换图标
What if I want to center the nav-items (links) on the navbar according to the browser window size in Bootstrap 4. Take a look at the code:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Now I want to center the div "navbar-nav" according to browser width. One thing that I have tried is giving it mr-auto and ml-auto which does seem to center it but not exactly. What it actually does it centers it according to the width "browser window width - logo width" . I want it centered exactly in the middle of the screen.
I have tried changing position to absolute as well but again that kind of messes up layout in collapsed mode as well.
解决方案
Use the flexbox and margin utils responsively...
Bootstrap 4 alpha 6
http://codeply.com/go/YvzHvQQRAs (center brand & links)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</nav>
Bootstrap 4.1
https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)
EDIT..
The answer is still basically the same. Use mx-auto
to center.
http://codeply.com/go/mycC5z8lpJ (center links, brand left)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8
Other Bootstrap 4 Navbar alignment examples
Also see...
Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left
这篇关于如何在 Bootstrap 中居中导航项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!