无论我尝试什么,我都无法在 Bootstrap 导航栏中居中某些内容,有什么解决方案吗?
我试过添加一个 div,使用 margin:0 auto;
或 margin-right:auto; margin-left:auto;
,使用了center-block
类。什么都行不通,为什么实现如此简单的事情如此困难我无法理解,我做错了什么?
这是当前代码:
<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav text-center">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
最佳答案
更新 Bootstrap 5 (2021)
Navbar 仍然使用 flexbox,因此对齐方式与 Bootstrap 4 相同。
更新 Bootstrap 4.1+
Bootstrap 4 导航栏现在使用 flexbox,因此 网站名称
可以使用 mx-auto
居中。左侧和右侧菜单不需要 float 。
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar center with mx-auto
Demo
如果导航栏只有一个navbar-nav
,那么justify-content-center
也可以用来居中。
编辑
在上面的解决方案中,Website Name
relative 居中于左右 navbar-nav
所以如果这些相邻的宽度导航不同,网站名称
不再居中。
要解决此问题,可以使用绝对居中 的 flexbox 解决方法之一...
选项 1 - 使用 position:absolute;
既然可以在 flexbox 中使用绝对定位,一种选择是在要居中的元素上使用它。
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Navbar center with absolute position Demo
选项 2 - 使用 flexbox 嵌套
最后,另一种选择是使居中元素也 display:flexbox
(使用 d-flex
)并居中对齐。在这种情况下,每个导航栏组件都必须有 flex-grow:1
从 Bootstrap 4 Beta 开始,导航栏现在是 display:flex
。 Bootstrap 4.1.0 包含一个新的 flex-fill
类来使每个导航部分填充宽度:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
<div class="container justify-content-center">
<ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
<ul class="nav navbar-nav flex-fill justify-content-center">
<li class="nav-item"><a class="nav-link" href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav flex-fill w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar center with flexbox nesting Demo
在 Bootstrap 4.1.0 之前,您可以像这样添加 flex-fill 类...
.flex-fill {
flex:1
}
从 4.1 开始,flex-fill
包含在 Bootstrap 中。
Bootstrap 4 Navbar center demos
More centering demos
Center links on desktop, left align on mobile
相关:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
How move 'nav' element under 'navbar-brand' in my Navbar
关于css - 在 Bootstrap Navbar 中居中一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55251208/