bootstrap5 導航鏈接不是藍色，也不是懸停

Question

我添加了 bootstrap5 CDN 鏈接來研究 bootstrap nav，但是當我將 nav-link 添加到我的鏈接標簽時，它有正確的 styles 除了藍色不存在並且它沒有懸停。 但相同的代碼在 W3schools 和 codeply.com 中運行良好。 請問我需要幫助

這是我的工作

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
 


`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


</head>`
<body>
    `<h1>Hello, world!</h1>

    <nav class="navbar navbar-expand-lg>
      <div class="container-fluid">
         <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Link 3</a>
          </li>
        </ul>
      </div>
    </nav>`

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

  </body>
</html>

Answer 1

試試這個：你缺少結尾的 class="navbar navbar-expand-lg"

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
 


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


</head>
<body>
    <h1>Hello, world!</h1>

    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
         <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Link 3</a>
          </li>
        </ul>
      </div>
    </nav>`

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

  </body>
</html>

bootstrap5 導航鏈接不是藍色，也不是懸停

問題描述

1 個解決方案

解決方案1
0 2022-12-01 06:58:17

bootstrap5 導航鏈接不是藍色，也不是懸停

問題描述

1 個解決方案

解決方案1 0 2022-12-01 06:58:17

解決方案1
0 2022-12-01 06:58:17