极客教程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 “等附加类进行样式设计。
第2步 --为你的导航条的品牌/logo添加一个 “navbar-brand “类。
第3步 - 使用 “navbar-toggler “类创建一个用于切换导航条项目的按钮，以及用于指定目标元素和切换行为的 data-toggle 和 data-target 属性。
第4步 --使用 “collapse navbar-collapse “类为导航条的项目创建一个容器，以及一个与按钮的 “data-target “属性匹配的 “id “属性。
第5步 - 在容器内，使用 “navbar-nav “类创建一个无序的导航条项目列表。
第6步 --将 “justify-content-center “类添加到 “navbar-nav “类中，以便将项目对齐到中心。
第7步 - 为导航栏中的每个项目添加带有 “nav-item “和 “nav-link “类的列表项。
第8步 --这是使用内置的Bootstrap 4类将导航条项目对准中心的方法的全部代码，在一个HTML文件（index.html）中–。
方法2：使用CSS
第二种方法是使用CSS来覆盖导航条项目的默认对齐方式。这可以通过在CSS中定位 “navbar-nav “类，并使用 “justify-content “属性来实现，其值为 “center”。
例子
下面是一个带输出的分步代码示例—-。
第1步 - 创建一个HTML文件，并添加以下代码，在项目中包含Bootstrap 4 CSS和JS文件。
第2步 - 在你的CSS文件中，添加以下代码，以 “navbar-nav “类为目标，并将导航栏中的项目对齐到中心。
第3步 - 整个代码在单一的HTML（index.html）文件中，如下所示
总结
在这篇文章中，我们讨论了如何使用Bootstrap 4将导航条中的项目对齐到中心。我们介绍了两种方法：使用Bootstrap 4内置类和使用CSS。这两种方法都很简单，很容易实现，选择哪种方法取决于你项目的具体要求。