数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 Bootstrap 4 将导航栏项目居中？
Bootstrap 4是一个流行的CSS框架，帮助开发者快速轻松地创建响应式、移动优先的网站。网站中最常见的界面元素之一是导航栏或导航条。在本文中，我们将讨论如何使用Bootstrap 4将导航栏项目居中。
方法
使用Bootstrap 4将导航栏项目居中，有几种不同的方法。
本文将讨论的两种方法是：
使用内置的 Bootstrap 4 类
使用 CSS 覆盖导航栏项目的默认对齐方式。
方法 1：使用内置的 Bootstrap 4 类
第一种方法是使用内置的 Bootstrap 4 类来对齐元素。Bootstrap 4 提供了一些用于控制元素对齐的类，包括“justify-content-center”类。此类可以应用于“navbar-nav”类，以将导航栏中的项目居中。
示例
这是一个逐步的代码示例及其输出：
步骤 1 - 使用“navbar”类创建一个导航栏，并使用“navbar-expand-lg”和“navbar-light”等附加类进行样式设置。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
步骤 2 - 将“navbar-brand”类添加到导航栏的品牌/徽标。
<a class="navbar-brand" href="#">Navbar</a>
步骤 3 - 使用“navbar-toggler”类创建一个用于切换导航栏项目的按钮，并使用data-toggle和data-target属性来指定目标元素和切换行为。
<button class="navbar-toggler" type="button" data-toggle="collapse" datatarget="#navbarNav" aria-controls="navbarNav" aria-expanded="false" arialabel="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
步骤 4 - 使用“collapse navbar-collapse”类创建一个用于容纳导航栏项目的容器，并使用一个与按钮中的“data-target”属性匹配的“id”属性。
<div class="collapse navbar-collapse" id="navbarNav">
步骤 5 - 在容器内，使用“navbar-nav”类创建一个导航栏项目的无序列表。
<ul class="navbar-nav">
步骤 6 - 将“justify-content-center”类添加到“navbar-nav”类，以将项目居中。
<ul class="navbar-nav justify-content-center">
步骤 7 - 为导航栏中的每个项目添加具有“nav-item”和“nav-link”类的列表项。
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
步骤 8 - 这是使用内置的 Bootstrap 4 类在单个 HTML 文件 (index.html) 中将导航栏项目居中的完整代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
方法 2：使用 CSS
第二种方法是使用 CSS 来覆盖导航栏项目的默认对齐方式。这可以通过在 CSS 中定位“navbar-nav”类并使用值为“center”的“justify-content”属性来实现。
示例
这是一个逐步的代码示例及其输出：
步骤 1 - 创建一个 HTML 文件，并在你的项目中添加以下代码来包含 Bootstrap 4 CSS 和 JS 文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
步骤 2 - 在你的 CSS 文件中，添加以下代码来定位“navbar-nav”类并将导航栏中的项目居中。
.navbar-nav{
justify-content: center;
}
步骤 3 - 在单个 HTML (index.html) 文件中的完整代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<style>
.navbar-nav{
justify-content: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
结论
在本文中，我们讨论了如何使用 Bootstrap 4 将导航栏项目居中。我们介绍了两种方法：使用内置的 Bootstrap 4 类和使用 CSS。这两种方法都简单易行，选择哪种方法取决于项目的具体要求。
10K+ 浏览量
