HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 Bootstrap 4 将导航栏项目居中对齐?

bootstrapcssweb developmentfront end technology更新于 2025/1/13 15:08:17

Bootstrap 4 是一个流行的 CSS 框架，可帮助开发者快速轻松地创建响应式、移动优先的网站。导航栏是网站中最常见的设计元素之一。在本文中，我们将讨论如何使用 Bootstrap 4 将导航栏中的项目居中对齐。

方法

使用 Bootstrap 4 将导航栏中的项目居中对齐有几种不同的方法。

本文将讨论的两种方法是:-

  • 使用 Bootstrap 4 内置类

  • 使用 CSS 覆盖导航栏项目的默认对齐方式。

方法 1:使用 Bootstrap 4 内置类

第一种方法是使用 Bootstrap 4 内置类来对齐元素。Bootstrap 4 提供了几个用于控制元素对齐方式的类，包括"justifycontent-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="切换导航">
<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.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-HcXJqkjpN8O9+IbbTn2m79DyPwMlXwoWufeQjZHPn6EdauI1b6Q5t7mx8X7jIbbV" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-Z4P4o6WOKU6Pzzg6y+UJyOY5k5+gIWe0X0Sl/Z5Z5JmBjgyc6UFO2H2zij6UwPi" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZEjThE6Zf3G3b6QZ1G5KM+" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDP1zG7Nr" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

结论

本文讨论了如何使用 Bootstrap 4 将导航栏中的项目居中对齐。我们介绍了两种方法:使用 Bootstrap 4 内置类和使用 CSS。这两种方法都简单易行，具体选择哪种方法取决于项目的具体需求。

相关文章

有用资源

打印 ❮ 上一节:如何在 Bootstrap 4 中对齐分页?