Bootstrap 导航栏用纯色填充活动项目答案

【问题标题】：Bootstrap navbar fill active item with solid colorBootstrap 导航栏用纯色填充活动项目
【发布时间】：2022-09-22 21:50:57
【问题描述】：

我正在使用带有固定顶部导航栏的 Bootstrap 5 构建一个页面，我希望“活动”项目具有类似于here 的纯色背景颜色。

当我打开开发人员工具时，我发现这些项目没有填满导航栏的整个高度，而且我是 Bootstrap 的新手，并且对 HTML/CSS 很生疏，所以我无法弄清楚哪些元素与样式相关得到我想要的。

<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">

<div class=\"container\">
  <a class=\"navbar-brand\" href=\"#\">
    <img class src=\"https://via.placeholder.com/50\" alt=\"Foobar\" height=\"32\">
  </a>
  
  <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
      <span class=\"navbar-toggler-icon\"></span>
  </button>
    
  <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">
    <ul class=\"navbar-nav me-auto mb-2 mb-md-0\">
      <li class=\"nav-item dropdown\">
        <a class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">Dropdown</a>
        <ul class=\"dropdown-menu\">
          <li><a class=\"dropdown-item\" href=\"#\">Item A #1</a></li>
          <li><a class=\"dropdown-item\" href=\"#\">Item B #2</a></li>
        </ul>
      </li>
      <li class=\"nav-item\">
        <a class=\"nav-link active\" href=\"#\" role=\"button\" aria-expanded=\"false\">
            Active
        </a>
      </li>
    </ul>
    <ul class=\"navbar-nav flex-row ml-md-auto d-none d-md-flex\">
      <li class=\"nav-item\">
        <a class=\"nav-link p-2 bi bi-github\" href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub\" style=\"font-size: 1.2em\"></a>
      </li>
    </ul>
  </div>
</div>

<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>

请标记您的 Bootstrap 版本。你试过什么？在上面的演示中添加一些 CSS 作为起点。

标签： html css twitter-bootstrap navbar

【解决方案1】：

有几件事可以让您朝着这个方向开始：

使用标准navbar layout，这样您就可以在顶层拥有列表项，而不仅仅是原始按钮。
用p-0 移除外部元素上的padding，这样列表项就会是全高的。如果您愿意，可以使用其他方法使它们再次变高，就像我在这里通过垂直填充所做的那样。

使用一些自定义 CSS 添加悬停样式。在这里，我使用媒体查询仅应用导航栏处于桌面模式（992px 及以上）的效果。

以全屏模式查看此演示以查看结果。

@media (min-width: 992px) {
  .hover-bg > .nav-item {
    padding: .5rem;
  }
  .hover-bg > .nav-item:hover {
    background: pink;
  }
}

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

<nav class="navbar navbar-expand-lg bg-light p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 hover-bg">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

【讨论】：