bootstrap 如何对齐两个导航条

简介

Bootstrap是一个很受欢迎的用于创建网站和应用程序的前端框架。Bootstrap中的网格系统可以用来对齐两个导航条（navbars）。

要在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步 --创建两个导航条（navbars），并给每个导航条加上 “navbar “类。

第3步–在第一个导航条内包含一个类别为 “navbar-nav “的无序列表（ul）。

第4 步–在无序列表中加入类为 “nav-item “的列表元素（li）。

第5 步 – 每个列表项都应该有类别为 “nav-link “的链接（a）。

第6步 --第二个导航条内的第二个无序列表应该被赋予 “ml-auto “类。然后，第二个导航条将被定位到右边。

第7步 - 要改变导航条的外观，你可以根据需要添加更多的样式或类。

第8步 --你可以通过保存你的HTML文件并在浏览器中打开它来看到对齐的导航条。

第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步 --在每个无序列表中添加列表项（li），其类别为 ” nav-item “。

第 7 步–每个列表项都应该有类别为 ” nav-link “的链接（a）。

第 8步 - 要改变导航条的外观，你可以根据需要添加更多的样式或类别。

第 9步 --你可以通过保存你的HTML文件并在网络浏览器中打开它来看到对齐的导航条。

第 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>

结论

使用 “ml-auto “类或带有 “justify-content-between “的 “d-flex “类可以在Bootstrap中对齐两个导航条。带有 “justify-content-between “的 “d-flex “类在两个导航条之间平均分配空间，但 “ml-auto “类将第二个导航条排列在右侧。