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