导航药丸（引导程序 4）活动不工作答案

【问题标题】：Nav pills (bootstrap 4) active not working导航药丸（引导程序 4）活动不工作
【发布时间】：2023-04-04 22:27:01
【问题描述】：

我尝试将背景颜色应用到 Nav Pill 的活动状态。下面是我的 HTML 和 CSS

    .nav-pills > .nav-item > .nav-link:active{
        background: red!important;
        color: white!important;
    }

  .nav-pills > .nav-item > .nav-link:hover {
      background-color: green!important;
      color:white !important;
      box-shadow: 1px 1px!important;
    }
    .nav-pills .nav-link {
        color: #46b3e6;
        border: 2px solid #eee;
        margin-left: 10px;
        box-shadow: 2px 2px;
    }

这是我的html

            <ul class="nav nav-pills justify-content-center">
              <li class=" nav-item">
                <a class="nav-link" href="all_patients.php">All Patients</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
              </li>
            </ul>

还是因为我的链接具有相同的基础 (all_patients.php) ？谢谢

【问题讨论】：

拥有相同的 php 文件应该不是问题，尝试将活动状态置于 item 元素中：.nav-pills > .nav-item:active > .nav -链接{
谢谢。还是不行，

标签： css bootstrap-4 nav

【解决方案1】：

试试这个，

不使用`!important` 和`>`（直接子选择器）

只需使用并改变hover和active样式的order。

即先添加hover样式再添加active样式

.nav-pills .nav-item .nav-link:hover {
  background-color: green;
  color:white;
  box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active{
  background: red;
  color: white;
}

现场演示

.nav-pills .nav-item .nav-link:hover {
  background-color: green;
  color:white;
  box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active{
  background: red;
  color: white;
}
.nav-pills .nav-link {
  color: #46b3e6;
  border: 2px solid #eee;
  margin-left: 10px;
  box-shadow: 2px 2px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<ul class="nav nav-pills justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php">All Patients</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
  </li>
</ul>

【讨论】：

你想要这样的@Osah Prince吗？

不使用!important 和&gt;（直接子选择器）

不使用`!important` 和`>`（直接子选择器）