Bootstrap 4 如何将导航栏项目对齐到中心

Bootstrap 4 如何将导航栏项目对齐到中心

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步 --为你的导航条的品牌/logo添加一个 “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.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 “类,并使用 “justify-content “属性来实现,其值为 “center”。

例子

下面是一个带输出的分步代码示例—-。

第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。这两种方法都很简单,很容易实现,选择哪种方法取决于你项目的具体要求。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程