如何在 Bootstrap 中对齐两个导航栏?
简介
Bootstrap 是一个广受欢迎的用于创建网站和应用程序的前端框架。Bootstrap 中的网格系统可用于对齐两个导航栏。
要在 Bootstrap 中对齐两个导航栏，请在第二个导航栏上使用 ml-auto 类，并在两个导航栏的父容器上使用 justify-content-between 类型。
要将第二个导航栏定位到父容器的右侧，请在导航栏上使用 float-right 类。
方法
以下是在 Bootstrap 中对齐两个导航栏的一些典型方法 -
在两个导航栏的父容器上使用 'container' 类，并在第二个导航栏上使用 'ml-auto' 类。
在两个导航栏的父容器上使用"d-flex"类，并使用"justify-content-between"类将两个导航栏并排对齐。
现在让我们通过示例详细了解每种方法。
方法 1:使用"ml-auto"类
在 Bootstrap 中对齐两个导航栏的第一种方法是使用"ml-auto"类。在 Bootstrap 中对齐两个导航栏的一种方法是在第二个导航栏上使用"ml-auto"类。该类将使第二个导航栏与第一个导航栏的右侧对齐。
此外，您还可以将两个导航栏包裹在一个容器或容器流体类中，以设置导航栏的宽度。
算法
在这里，我们将通过一个分步示例来实现这种方法 -
步骤 1 - 将 Bootstrap 的 JavaScript 和 CSS 文件加载到您的 HTML 文档中。
步骤 2 - 创建两个导航栏 (navbar)，并为每个导航栏赋予类名"navbar"。
步骤 3 - 在第一个导航栏内包含一个带有类名"navbar-nav"的无序列表 (ul)。
步骤 4 - 将带有类名"nav-item"的列表元素 (li) 添加到无序列表中。
步骤 5 - 每个列表项应包含带有"nav-link"类的链接 (a)。
步骤 6 − 第二个导航栏内的第二个无序列表应赋予"ml-auto"类。这样，第二个导航栏将位于右侧。
步骤 7 − 要更改导航栏的外观，您可以根据需要添加更多样式或类。
步骤 8 − 保存 HTML 文件并在 Web 浏览器中打开即可查看对齐的导航栏。
步骤 9 − 最终代码如下所示 −
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
First navbar content
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-primary ml-auto">
Second navbar content
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
方法 2:使用"d-flex"类
使用 Flexbox 对齐两个导航栏是另一种选择。您可以通过向包裹两个导航栏的元素添加"d-flex"和"justify-contentbetween"类，将两个导航栏对齐到容器的不同侧面。
算法
这里，我们将通过一个分步示例来实现此方法 -
步骤 1 - 将 Bootstrap 的 JavaScript 和 CSS 文件加载到您的 HTML 文档中。
步骤 2 - 创建两个导航栏 (navbars)，并为每个导航栏添加类名"navbar."。
步骤 3 - 在两个导航栏周围，添加一个父容器元素，类名设置为"d-flex."。
步骤 4 - 应为父容器元素添加类名"justify-contentbetween"。这将在两个导航栏之间平均分配可用空间。
步骤 5 − 每个导航栏都应包含一个无序列表 (ul)，其类名为"navbar-nav"。
步骤 6 − 在每个无序列表中添加带有类名"nav-item"的列表项 (li)。
步骤 7 − 每个列表项都应包含带有类名"nav-link"的链接 (a)。
步骤 8 − 要更改导航栏的外观，您可以根据需要添加更多样式或类。
步骤 9 − 保存 HTML 文件并在 Web 浏览器中打开即可看到对齐的导航栏。
步骤 10 − 最终代码如下所示 −
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-between">
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
First navbar content
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
Second navbar content
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
结论
在 Bootstrap 中，使用"ml-auto"类或带有"justify-content-between"的"d-flex"类可以对齐两个导航栏。带有"justify-content-between"的"d-flex"类会在两个导航栏之间平均分配空间，而"ml-auto"类会将第二个导航栏对齐到右侧。
