导航栏是 Web 应用程序的一部分，允许用户导航到网站的不同部分。顾名思义，navbar 基本上是一个导航栏。 Bootstrap 4 提供了一个内置的导航栏类，允许我们创建导航栏。此外，我们可以通过根据我们的要求定义各种 CSS 样式来创建自定义导航栏。在本文中，我们将演示使用 CSS 内置类和自定义 CSS 样式对齐两个导航栏的方法。
示例 1：在第一种方法中，我们使用了 Bootstrap 4 的内置导航栏类。两个导航栏一个接一个放置。第一个导航栏背景为深色，导航链接左对齐，而“注册”和“注销”按钮右对齐。第一个导航栏还包含一个下拉菜单，其中包含指向网站多个部分的链接。第二个导航栏的导航链接与右侧对齐，纯文本的超链接与左侧对齐。两个导航栏都响应屏幕尺寸。导航栏切换按钮在屏幕尺寸减小时出现，在屏幕尺寸增大时消失。单击切换按钮时会显示导航栏。
代码实现：
输出：
示例 2：在这种方法中，导航栏是使用自定义 CSS 样式创建的。 topnav类划分代表第一个导航栏，而bottomnav类划分代表第二个导航栏。第一个导航栏的左侧是导航链接，右侧是登录链接。第二个导航栏左侧是导航链接，右侧是“注册”和“注销”按钮。与前面的示例不同，此示例中的导航栏没有响应。导航栏不适应屏幕尺寸。
代码实现：
输出：
