如何在Bootstrap navbar中添加border bottom hover效果？

Question

我正在嘗試像這樣在引導程序中向導航欄添加邊框底部 hover 效果

但我得到這樣的結果

我需要將邊框底部一直移動到導航欄底部。

 .nav-link:visited, .nav-link:link { border-bottom: 2px solid transparent; }.nav-link:hover, .nav-link:active { border-bottom: 2px solid #1bcfc6; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-dark bg-dark "> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="./home.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./about.html">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="./product.html">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact.html">Contact Us</a> </li> </ul> </div> </nav>

Answer 1

這是由 Bootstrap 類在導航欄元素上設置的默認填充引起的。 您可以使用Bootstrap 類pb-0和pt-0覆蓋它們。 Padding Bottom 0 和 Padding Top 0 是這些類的擴展。 您可能只需要 pb-0 而不是 pt-0 ，這樣文本在垂直方向上的間距就不會不均勻。

當導航欄在較小的屏幕上折疊時，全屏查看下面的 output。

 .nav-link:visited, .nav-link:link { border-bottom: 2px solid transparent; }.nav-link:hover, .nav-link:active { border-bottom: 2px solid #1bcfc6; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0 pb-0"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="./home.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./about.html">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="./product.html">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact.html">Contact Us</a> </li> </ul> </div> </nav>

Output：

Answer 2

實現這一目標的一種方法是像這樣覆蓋導航欄的引導程序填充：

.navbar {
  padding: 0 !important;
}

Answer 3

您必須檢查並了解Bootstrap nav 、 ul 、 li等中a padding和margin 。

如果您使用border ，它將占用所有空間，包括padding ，因此您無法使用border實現此目的。 通常，我們使用 CSS 偽元素來完成這種工作，例如 CSS ::before或::after這是一個簡單的例子，希望它能幫助您實現您想要的。

 <style>.nav { text-align: center; background: rgba(0,0,0,0.1); }.nav a { text-decoration: none; padding: 8px 15px; border-radius: 3px; display: inline-block; color: #000; font-family: sans-serif; font-weight: 600; transition: all.3s ease; position: relative; z-index: 1; }.nav a:hover, .nav a.active { background: #000; color: #fff; }.nav a::before { position: absolute; content: ''; width: calc(100% - 20px); height: 3px; background: orange; bottom: 0; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: all.3s ease; }.nav a.active::before, .nav a:hover::before { visibility: visible; opacity: 1; } </style> <div class="nav"> <a href="#">item-1</a> <a href="#">item-2</a> <a href="#" class="active">item-3</a> <a href="#">item-4</a> <a href="#">item-5</a> </div>