在bootstrap 3中更改活动导航栏项的大小

Question

下面的示例显示了bootstrap 3中的导航栏。

<div class="navbar-collapse navbar-ex1-collapse collapse" style="height: 1px;">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">Item 1</a></li>
                            <li class="active"><a href="about.html">Item 2</a></li>
                            <li><a href="blog.html">Item 3</a></li>
                            <li><a href="contact.html">Item 4</a></li>
                        </ul>
                    </div> 

代码输出如下所示。 我希望在活动项目下面显示一行，而不是在活动项目周围显示的蓝色框。

我该怎么做？！

Answer 1

尝试使用CSS并添加：

.navbar-nav li.active {
   background-color: none;
   text-decoration: underline;
}

希望它有所帮助！

或许这个

.navbar-nav > .active > a {
   background-color: none;
   text-decoration: underline;
}