資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 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`”類。此類將第二個導航欄與第一個導航欄對齊到右側。
此外，您可以將兩個導航欄都包裝在 `container` 或 `container-fluid` 類中，以設定導航欄的寬度。
演算法
在這裡，我們將逐步介紹一個示例來實現此方法：
步驟 1 - 將 Bootstrap 的 JavaScript 和 CSS 檔案載入到您的 HTML 文件中。
步驟 2 - 建立兩個導航欄，併為每個導航欄賦予“`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" 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" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
方法 2：使用 `d-flex` 類
使用 Flexbox 對齊兩個導航欄是另一種選擇。您可以透過向包裝兩個導航欄的元素新增“`d-flex`”和“`justify-content-between`”類，將兩個導航欄對齊到容器的不同側。
演算法
在這裡，我們將逐步介紹一個示例來實現此方法：
步驟 1 - 將 Bootstrap 的 JavaScript 和 CSS 檔案載入到您的 HTML 文件中。
步驟 2 - 建立兩個導航欄，併為每個導航欄賦予“`navbar`”類。
步驟 3 - 在兩個導航欄周圍新增一個具有“`d-flex`”類的父容器元素。
步驟 4 - 父容器元素應該賦予“`justify-content-between`”類。這將平均分配兩個導航欄之間的可用空間。
步驟 5 - 每個導航欄內都應該包含一個具有“`navbar-nav`”類的無序列表 (ul)。
步驟 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" 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" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
結論
使用“`ml-auto`”類或“`d-flex`”類與“`justify-content-between`”類可以對齊 Bootstrap 中的兩個導航欄。“`d-flex`”類與“`justify-content-between`”類平均分配兩個導航欄之間的空間，但“`ml-auto`”類將第二個導航欄對齊到右側。
瀏覽量：103
