时间戳

首页 > 解决方案 > 如何调整导航栏高度并为链接添加悬停颜色？

html - 如何调整导航栏高度并为链接添加悬停颜色？

问题描述

当我尝试调整导航栏的高度时，折叠按钮无法正常工作（我尝试过 style="height: 60px;" 以及类似 .navbar {height: 60px;} 但折叠菜单停止工作）。此外，导航栏折叠按钮不会关闭菜单，它只能打开它（它会关闭它，然后出现故障并重新打开它）。我还想在“关于”链接中添加悬停颜色，并在该部分中设置活动颜色，但无法弄清楚。谢谢

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #121212;">
            <a class="navbar-brand mb-0 h3" href="#"
            style="font-size: 25px; color: #F5F2D0;">
            <img src="favicon_io/android-chrome-512x512.png" width="40" height="40" class="d-inline-block" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" 
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="#" 
                            style="color: #D8DCE6; font-size: 27px;">
                            &nbsp&nbsp&nbspAbout
                        </a>
                    </div>
              </div>
        </nav>

当我尝试调整导航栏的高度时，折叠按钮无法正常工作（我尝试过 style="height: 60px;" 以及类似 .navbar {height: 60px;} 但折叠菜单停止工作）。此外，导航栏折叠按钮不会关闭菜单，它只能打开它（它会关闭它，然后出现故障并重新打开它）。我还想在“关于”链接中添加悬停颜色，并在该部分中设置活动颜色，但无法弄清楚。谢谢

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #121212;">
            <a class="navbar-brand mb-0 h3" href="#"
            style="font-size: 25px; color: #F5F2D0;">
            <img src="favicon_io/android-chrome-512x512.png" width="40" height="40" class="d-inline-block" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" 
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="#" 
                            style="color: #D8DCE6; font-size: 27px;">
                            &nbsp&nbsp&nbspAbout
                        </a>
                    </div>
              </div>
        </nav>

标签： htmlcss

解决方案

您很可能在集成 Bootstrap、JQuery 或 Popper.js（或全部三个）时遇到问题。

当我复制您的代码并添加时：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

在<head>然后：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

作为标签之前的最后一件事</body>，它起作用了。请参阅我设置的这个 CodePen： https ://codepen.io/jeffberlin/pen/ZEbPgvK

至于悬停，由于您在元素上声明了颜色，您可以像这样更改它：

.nav-link:hover {
  color: red !important;
}

推荐阅读