极客教程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步 - 最终的代码看起来像下面的代码
例子
方法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步 - 最终的代码看起来像下面的代码
例子
结论
使用 “ml-auto “类或带有 “justify-content-between “的 “d-flex “类可以在Bootstrap中对齐两个导航条。带有 “justify-content-between “的 “d-flex “类在两个导航条之间平均分配空间，但 “ml-auto “类将第二个导航条排列在右侧。