Question

我使用Bootstrap创建了一个导航栏。我使用.bg-danger添加了红色背景。出于某种原因，导航栏链接显示为蓝色而非黑色，因为使用了.navbar-light。如何防止链接以蓝色字体显示？

以下是导航栏的html：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<nav class="nav navbar-expand-md bg-danger navbar-light nav-tabs sticky-top justify-content-center">
        <a class="nav-link" href='/home/'>Home</a>
        <a class="nav-link" href='/feed/'>Newsfeed</a>
        <a class="nav-link" href='/profiles/'>View Candidates</a>
        <a class="nav-link" href='/register/'>Register</a>
        <a class="nav-link" href='/elections/'>Elections</a>
    </nav>

Answer 1

您需要纠正两件事：

将导航链接放入navbar-nav类
将nav-item课程添加到每个导航链接

这种方法避免了不必要的css攻击。

以下是工作代码段（点击下面的＆＃34;运行代码段＆＃34;按钮，然后展开到整页）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="nav navbar-expand-md bg-danger navbar-dark nav-tabs sticky-top justify-content-center">
    <div class="navbar-nav">
        <a class="nav-item nav-link" href='/home/'>Home</a>
        <a class="nav-item nav-link" href='/feed/'>Newsfeed</a>
        <a class="nav-item nav-link" href='/profiles/'>View Candidates</a>
        <a class="nav-item nav-link" href='/register/'>Register</a>
        <a class="nav-item nav-link" href='/elections/'>Elections</a>
    </div>
</nav>

＆＃13;

Answer 2

更改锚标记以添加样式如下所示？

风格= '颜色：黑色'

<a class="nav-link" style='color:black' href='/home/'>Home</a>

Answer 3

我想现在你的链接占用了bootstrap默认css中提供的默认值。您可以使用css中的以下代码覆盖链接颜色，并确保它位于bootstrap的默认css之后。

.bg-danger .nav-link {
  color: #000000;
}

删除导航栏链接的文本颜色

3 个答案: