當我導入引導程序時，HTML 下拉菜單不起作用

Question

我正在做一個需要引導程序的項目。 它工作得很好，但是當我嘗試添加一個下拉菜單時它不起作用。 另外，我正在從這里制作下拉菜單。 這是 html 代碼：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
<div class="menu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

這是 css 代碼：

     .menu {
        overflow: hidden;
        background-color: transparent;
        font-family: Arial;
      }
      
      .menu a {
        float: left;
        font-size: 25px;
        color: white;
        text-align: center;
        padding: 15px;
        text-decoration: none;
      }
      
      .dropdown {
        float: left;
        overflow: hidden;
      }
      
      .dropdown .dropbtn {
        font-size: 25px;
        border: none;
        color: white;
        padding: 15px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
      }
      
      .menu a:hover, .dropdown:hover .dropbtn {
        color:white;
        text-decoration:underline;
        text-decoration-color:white;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
      }
      
      .dropdown-content a {
        float: none;
        color: black;
        padding: 15px;
        text-decoration: none;
        display: block;
        text-align: left;
      }
      
      .dropdown-content a:hover {
        background-color: #ddd;
      }
      
      .dropdown:hover .dropdown-content {
        display: block;
      }

當我刪除<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">下拉菜單完美運行，但是當我添加它時它不起作用。

請回復。

Answer 1

這個問題的答案很明確！ 如果您閱讀有關下拉菜單的引導文檔，您會注意到dropdown class 是引導程序使用的類之一。 因此，要解決此問題，您需要將 class 名稱更改為其他名稱，例如dropdownME class，如下面的代碼：

 .menu { overflow: hidden; background-color: #000; font-family: Arial; }.menu a { float: left; font-size: 25px; color: white; text-align: center; padding: 15px; text-decoration: none; }.dropdownME { float: left; overflow: hidden; }.dropdownME.dropbtn { font-size: 25px; border: none; color: white; padding: 15px; background-color: inherit; font-family: inherit; margin: 0; }.menu a:hover, .dropdownME:hover.dropbtn { color:white; text-decoration:underline; text-decoration-color:white; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; }.dropdown-content a { float: none; color: black; padding: 15px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdownME:hover.dropdown-content { display: block; }

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="menu"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdownME"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> </body> </html>

我還更改了.menu的背景顏色以更好地顯示。

當我導入引導程序時，HTML 下拉菜單不起作用

問題描述

1 個解決方案

解決方案1
2 2022-09-05 11:25:51

當我導入引導程序時，HTML 下拉菜單不起作用

問題描述

1 個解決方案

解決方案1 2 2022-09-05 11:25:51

解決方案1
2 2022-09-05 11:25:51