css - 在 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