資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 Bootstrap 4 將導航欄專案居中？
Bootstrap 4是一個流行的CSS框架，幫助開發者快速輕鬆地建立響應式、移動優先的網站。網站中最常見的介面元素之一是導航欄或導航條。在本文中，我們將討論如何使用Bootstrap 4將導航欄專案居中。
方法
使用Bootstrap 4將導航欄專案居中，有幾種不同的方法。
本文將討論的兩種方法是：
使用內建的 Bootstrap 4 類
使用 CSS 覆蓋導航欄專案的預設對齊方式。
方法 1：使用內建的 Bootstrap 4 類
第一種方法是使用內建的 Bootstrap 4 類來對齊元素。Bootstrap 4 提供了一些用於控制元素對齊的類，包括“justify-content-center”類。此類可以應用於“navbar-nav”類，以將導航欄中的專案居中。
示例
這是一個逐步的程式碼示例及其輸出：
步驟 1 - 使用“navbar”類建立一個導航欄，並使用“navbar-expand-lg”和“navbar-light”等附加類進行樣式設定。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
步驟 2 - 將“navbar-brand”類新增到導航欄的品牌/徽標。
<a class="navbar-brand" href="#">Navbar</a>
步驟 3 - 使用“navbar-toggler”類建立一個用於切換導航欄專案的按鈕，並使用data-toggle和data-target屬性來指定目標元素和切換行為。
<button class="navbar-toggler" type="button" data-toggle="collapse" datatarget="#navbarNav" aria-controls="navbarNav" aria-expanded="false" arialabel="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
步驟 4 - 使用“collapse navbar-collapse”類建立一個用於容納導航欄專案的容器，並使用一個與按鈕中的“data-target”屬性匹配的“id”屬性。
<div class="collapse navbar-collapse" id="navbarNav">
步驟 5 - 在容器內，使用“navbar-nav”類建立一個導航欄專案的無序列表。
<ul class="navbar-nav">
步驟 6 - 將“justify-content-center”類新增到“navbar-nav”類，以將專案居中。
<ul class="navbar-nav justify-content-center">
步驟 7 - 為導航欄中的每個專案新增具有“nav-item”和“nav-link”類的列表項。
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
步驟 8 - 這是使用內建的 Bootstrap 4 類在單個 HTML 檔案 (index.html) 中將導航欄專案居中的完整程式碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
方法 2：使用 CSS
第二種方法是使用 CSS 來覆蓋導航欄專案的預設對齊方式。這可以透過在 CSS 中定位“navbar-nav”類並使用值為“center”的“justify-content”屬性來實現。
示例
這是一個逐步的程式碼示例及其輸出：
步驟 1 - 建立一個 HTML 檔案，並在你的專案中新增以下程式碼來包含 Bootstrap 4 CSS 和 JS 檔案。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
步驟 2 - 在你的 CSS 檔案中，新增以下程式碼來定位“navbar-nav”類並將導航欄中的專案居中。
.navbar-nav{
justify-content: center;
}
步驟 3 - 在單個 HTML (index.html) 檔案中的完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<style>
.navbar-nav{
justify-content: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
結論
在本文中，我們討論瞭如何使用 Bootstrap 4 將導航欄專案居中。我們介紹了兩種方法：使用內建的 Bootstrap 4 類和使用 CSS。這兩種方法都簡單易行，選擇哪種方法取決於專案的具體要求。
10K+ 瀏覽量
