如何在bootstrap 3中禁用选项卡?

时间:2014-07-24 10:53:43

标签: twitter-bootstrap uinavigationbar

我正在使用bootstrap创建一个简单的网站,并且不能让导航栏看起来像我想要的那样。我试图摆脱悬停在导航元素上时出现的导航栏中的背景颜色。 Bootstrap似乎会自动生成这种悬停效果,但我不想拥有一个仅限平面文本的导航栏。有没有一种简单的方法可以使用CSS或者使用不同的bootstrap类来禁用这种悬停效果?已经坚持了一段时间,所以希望有人可以帮助我。

提前致谢

<nav class="navbar-wrapper" role="navigation">
        <div class="container">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Logo</a>
                </div>
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-right">
                                <li><a href="#">1</a><li>
                                <li><a href="#">2</a><li>
                                <li><a href="#">3</a><li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li class="navbarpadding">
                                    <form action="#">
                                        <button class="btn btn-primary navbar-btn">Apply</button>
                                    </form>
                                </li>
                        </ul>
                    </div>
                </div>
            </div>  
</nav>

2 个答案:

答案 0 :(得分:0)

你可以通过使用这个css代码来摆脱悬停效果

.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background: none;
}

答案 1 :(得分:0)

如果右键单击并检查元素,则可以复制css路径。

使用它可以使用此代码删除背景。

  body > nav > div > div.collapse.navbar-collapse.navbar-ex1-collapse > div > ul > li > a
  {
      background:none;
  }