Question

当选择锚点时，如何在此部分代码中更改导航的背景颜色？我只想在导航链接下面有一个边框底部。

这是代码：

 <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>

                <li class="page-scroll">
                    <a href="#">Home</a>
                </li>
                <li class="page-scroll">
                    <a href="#ark">Nav 2</a>
                </li>

                <li class="">
                    <a href="/table.html">Nav 3</a>
                </li>

                <li class="page-scroll">
                    <a href="#ausstattung">Nav 4</a>
                </li>

                <li class="page-scroll">
                    <a href="#lage">Nav 5</a>
                </li>

                <li class="page-scroll">
                    <a href="#contact">Nav 6</a>
                </li>

                <li class="page-scroll">
                    <a href="#kontakt">Nav 7</a>
                </li>

            </ul>
             <a class="navbar-brand" href="#page-top"></a>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Answer 1

现在我明白了。更改以下行：

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #ffffff;
    background-color: #1a242f;
}

对此：

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #ffffff;
    border-bottom: 2px solid #1a242f;
    background: none;
}

这可以在bootstrap.min.css中找到。如果你不想编辑它，只需在最后添加上面的代码。

Bootstrap：更改活动菜单项背景

1 个答案: