时间戳

首页 > 解决方案 > 导航栏不合适

html - 导航栏不合适

问题描述

导航栏图片：

预期的 ：期望导航栏

现实 ：现实导航栏

我能解决这个问题吗

我的导航栏代码

<nav class="navbar navbar-default navbar fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">NavbarBrand</a>
                </div>
                <nav class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">A</a></li>
                    <li>A</li>
                </ul>
            </div>
        </nav>

标签： htmlcssbootstrap-4

解决方案

a:link {
  color: gray;
}
.nav-link:hover {
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="nav bg-dark text-white">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

还要检查这个小提琴。

用于获取页面中间的导航栏<ul class="nav justify-content-center">用于获取页面右侧的导航 用于获取<ul class="nav justify-content-end">有关引导程序basenav的更多信息

推荐阅读