Bootstrap 3升级到Bootstrap 5 Navbar问题

Question

我负责将 Bootstrap 从 3 升级到 5，并允许一些小的 UI 更改，例如 px 方面的更改。然而，我正遭受导航栏转换的困扰，如下所述。

这是使用 Bootstrap 3 的导航栏的简化版本。

.image-header-logo {
  margin: -5px;
  height: 34px;
}

.custom-navbar {
  box-shadow: 0px 0px 6px rgb(255 100 0);
}

.navbar {
  border: 0px;
}

.navbar-nav > li.active {
  box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
}

.navbar-nav > li > a {
  color: #ff6633;
}

.navbar-nav > li > a:hover {
    background: rgb(255, 119, 0);
    color: #ffffff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar custom-navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a class="navbar-brand" href="#">
              <img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
      </a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right" >
                <li><a class="nav-menu-item">Welcome</a></li>
                <li class="active">
          <a class="nav-selected-menu-item nav-text-color" href="#">Java</a>
        </li>
        <li>
          <a class="nav-selected-menu-item nav-text-color" href="#">PHP</a>
        </li>
            </ul>   
        </div>
    </div>
</nav>

这是使用 Bootstrap 5 的新代码。

body {
  font-size: 14px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.image-header-logo {
  height: 2.5rem;
}

.navbar {
  padding: 0 1rem;
  margin-bottom: 6px;
}

.custom-navbar {
  box-shadow: 0px 0px 6px rgb(255 100 0);
}

.nav-item {
  cursor: pointer;
  padding: 0.5rem 0;
}

.navbar .navbar-collapse .navbar-nav .nav-item.active {
  box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
  cursor: pointer;
}

.navbar .navbar-collapse > .navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item > .nav-link {
  color: #ff6633;
}

.navbar .navbar-collapse .navbar-nav .nav-item:hover {
    background: rgb(255, 119, 0);
    color: #ffffff; /* FIXME: not work == */
}

/* FIXME:  need to add this, but in the outskirt it does not work */
.navbar .navbar-collapse .navbar-nav .nav-item > .nav-link:hover {
  color: #ffffff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-md navbar-light custom-navbar">
  <a class="navbar-brand" href="/i/trade">
    <img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
  </a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="myNavbar">
    <span class="navbar-text ms-auto">Welcome</span>
    <ul class="navbar-nav">
      <li class="nav-item active px-1">
        <a class="nav-link">Java</a>
      </li>
      <li class="nav-item px-1">
        <a class="nav-link">PHP</a>
      </li>
    </ul>
  </div>
</nav>

由于 stackoverflow 中似乎存在渲染问题，我也将代码放在 jsfiddle 中。 在 jsfiddle 中也可以找到相同的代码库。

引导程序3：https://jsfiddle.net/hphchan/hfo9njc3/66/

引导5：https://jsfiddle.net/hphchan/4yrxu8dk/60/

从 2 版本生成的大多数 UI 看起来相似，但存在以下问题。

在 Bootstrap 5 中，当鼠标悬停在 nav-item 上而不是 nav-link 上时，由于 nav-item 中有填充，导致悬停颜色更改不起作用。 如下图所示。

这是 Bootstrap 3 版本，它可以在边缘运行。

我明白为什么由于类结构的变化它不起作用。然而我不知道如何使悬停行为相同。

Answer 1

您只能使用悬停选择器来模拟行为，仅适用于 nav-link 类，而忘记了NAV-ITEM来简化悬停时样式的应用。
这样， nav-link 应该具有颜色：＃ff6633当不悬停并颜色时：悬停时#ffffff：

.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
  color: #ff6633;
}

.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
  color: #ffffff;
  background: rgb(255, 119, 0);
}

另外，请删除.navbar的** margin-bottom **属性。

UL的标记将是：

<ul class="navbar-nav">
  <li class="nav-item active mx-2">
    <a class="nav-link py-3 px-3">Java</a>
  </li>
  <li class="nav-item ms-2">
    <a class="nav-link py-3 px-3">PHP</a>
  </li>
</ul>

工作示例：

body {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.image-header-logo {
  height: 2.5rem;
}

.navbar {
  padding: 0 1rem;
  /* override default 0.5rem 1rem */
  /* box-shadow: 0px 0px 6px rgb(255, 100, 0); */
  /* TODO: placed in #header instead */
  margin-bottom: 6px;
  /* reserve space for the box-shadow */
}

.custom-navbar {
  box-shadow: 0px 0px 6px rgb(255 100 0);
}

/* to create sadow on the bottom */
.nav-item {
  cursor: pointer;
}

.navbar .navbar-collapse .navbar-nav .nav-item.active>.nav-link {
  box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
  cursor: pointer;
}


/* to show orange in color on the line */
/* need to specify for so long, so that it can win without use of !important... == */
.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
  color: #ff6633;
}

/* FIXME:  need to add this, but in the outskirt it does not work */
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
  color: #ffffff;
  background: rgb(255, 119, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand navbar-light custom-navbar py-0">
  <a class="navbar-brand" href="/i/trade">
    <img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
  </a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="myNavbar">
    <span class="navbar-text ms-auto">Welcome</span>
    <ul class="navbar-nav">
      <li class="nav-item active mx-2">
        <a class="nav-link py-3 px-3">Java</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link py-3 px-3">PHP</a>
      </li>
    </ul>
  </div>
</nav>