首页 > 解决方案 > 当我单击菜单时,在 Bootstrap 4 中的哪个位置设置了背景?(附示例)

问题描述

好的,我正在学习一些基本的网络编码,当我点击它时,我的下拉菜单总是变成蓝色。我正在查看谷歌检查器,但看不到设置的位置。请问有人可以给我看吗?

!DOCTYPE html>
<html dir="ltr" lang="en" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#">
<head>
  <meta charset="utf-8">
  <meta content="Drupal 8 (https://www.drupal.org)" name="Generator">
  <meta content="width" name="MobileOptimized">
  <meta content="true" name="HandheldFriendly">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  

  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  


<p class="dropdown-item">
  click me, I turn blue, why? :/
</p>


</head>

  



   
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
  </script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
  </script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
  </script>

</html>

标签: htmlcssbootstrap-4drupal-8

解决方案


所以我发现我可以监听事件(鼠标点击),这使得很容易找到设置的位置:

.dropdown-item.active, .dropdown-item:active {
   color: #fff;
   text-decoration: none;
   background-color: #007bff;
}

在 _dropdown.scss


推荐阅读