Question

我有一个标准的bootstrap导航栏，如下所示：

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href='#'>Item 1</a></li>
            <li><a href='#'>Item 2</a></li>
            <li><a href='#'>Item 3</a></li>
            <li><a href='#'>Item 4</a></li>
        </ul>
    </div>
</nav>

网站的当前部分标记为active类，并且工作正常。现在我希望当前页面是一个Item 1链接时，导航栏项Item 1不是链接（因为指向当前页面的链接没有任何意义），但我仍然希望它是突出显示为活动页面。问题是，只要从a突出显示中移除li元素，就会出现问题。

我尝试简单地删除锚标记：

            <li class="active">Item 1</li>

将p.navbar-text放在项目周围：

            <li class="active"><p class='navbar-text'>Item 1</p></li>

还有其他一些事情，到目前为止还没有。

我知道我可以做类似的事情：

            <li class="active"><p class='navbar-text' style='background-color: #e7e7e7; padding: 15px; margin: 0'>Item 1</p></li>

得到我想要的东西。此外，这似乎有效：

            <li class="active"><a>Item 1</a></li>

但它在语义上是错误的。

是否可以在不添加我自己的CSS的情况下实现？

Answer 1

从我所看到的情况来看，less files for the navbar仅将此样式应用于锚点元素。你可以复制这个样式以适用于span或p之类的东西供你使用，但是没有办法使用默认的bootstrap css来解决这个问题。

活动的非链接导航栏项

1 个答案: