Bootstrap 导航栏居中
借助 Bootstrap 强大的灵活性，轻松打造美观居中的导航栏。
方法：
添加实用程序类:
在 元素中添加实用程序类 justify-content-center。 这将使导航栏中的所有元素水平居中。可选：添加偏移类:
如果要偏移导航栏的内容，可以在 元素中添加偏移类，例如 offset-1 或 offset-md-3。 这将向左或向右偏移导航栏，具体取决于偏移类的值。示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav class="navbar navbar-expand-lg justify-content-center">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>
通过上述方法，即可轻松创建水平居中的 Bootstrap 导航栏。
以上就是Bootstrap 导航栏居中：打造美观导航的详细内容，更多请关注php中文网其它相关文章！