在Bootstrap 3中更改侧面堆叠的导航颜色

Question

我见过很多关于此的帖子，但找不到合适的答案。我在左侧有一个如下图所示的导航栏。在右侧，我有旋转木马。

我使用下面的代码

<div class="row"> 
<div class="col-sm-3"> <!-- start of nav items -->
        <ul class="nav nav-tabs nav-stacked">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="/2014/call_for_sessions">About</a></li>
          <li><a href="/2014/volunteer">Brochure</a></li>
          <li><a href="/2014/exhibit">Schedule</a></li>
          <li><a href="/2014/call_for_sessions">Workshops</a></li>
          <li><a href="/2014/call_for_sessions">Talks</a></li>
          <li><a href="/2014/call_for_sessions">Register</a></li>        
</ul>
</div>

我需要的是，我需要更改此默认颜色和鼠标悬停颜色。什么是最好和最简单的自定义方式。我需要得到libreplanet sidebar中的内容。

Answer 1

您可以在浏览器中使用CSS检查器来查看Bootstrap控制的CSS类名称。在这种情况下，它是.nav-tabs > li > a。然后使用适当的淡入淡出效果和边距更改覆盖这些样式...

.nav-tabs > li > a, .nav-tabs>li.active>a {
    background-color: #999999;
    margin-right: 2px;
    margin-bottom: 5px;
    color: #ffffff;
    border-radius: 5px;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -ms-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.nav-tabs > li > a:hover, .nav-tabs>li.active>a:hover {
    background-color: #993333;
    color: #fff;
}

Demo on Bootply