如何使用 Bootstrap css 设置导航列表菜单的样式

Question

我正在使用带有两级列表的引导菜单（下拉菜单）。我使用的代码示例是：

<ul class="nav navbar-nav">                  
                                                          
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item0<span> class="caret"></span></a>
    <ul class="dropdown-menu">
                    <li><a href="#Item1">Item1</a></li>
                    <li><a href="#Item2">Item2</a></li>
                    <li><a href="#Item3">Item3</a></li>
                    <li><a href="#Item4">Item4</a></li>
                    <li><a href="#Item5">Item5</a></li>

    </ul>
</li>
<li>
    <ul class="nav navbar-nav">
                   <li><a href="#Item1">Item13</a></li>
    <ul class="dropdown-menu">
                    <li><a href="#Item1">Item131</a></li>
                    <li><a href="#Item2">Item132</a></li>
                    <li><a href="#Item3">Item133</a></li>
                    <li><a href="#Item4">Item134</a></li>
                    <li><a href="#Item5">Item135</a></li>

    </ul>
                   <li><a href="#Item2">Item23</a></li>
                   <li><a href="#Item3">Item33</a></li>
    </ul>
</li>

我想对颜色进行一些修改。但是，当我在以下课程中进行更改时：

.navbar-default .nav li a{
 ...
 }

它改变所有列表元素的颜色。 是否可以使用不同的颜色来设置嵌套列表的样式，而升级列表有不同的颜色？

例如“Item0，Item13 Item23 Item33”为红色，“Item1 .. Item5”为蓝色等等......

如何使用 Bootstrap 让它工作，还是我应该创建一个自定义 css？

Answer 1

您可以通过添加类来设置特定元素组的样式：

<li class="yourclass"><a href="#Item1">Item1</a></li>

然后使用 CSS 为所有具有相同类的元素设置样式：

.yourclass { color: red }

我希望这有帮助

Answer 2

当然：为您想要不同颜色和背景样式的元素添加一个类。示例

<ul class="dropdown-menu">
                <li><a href="#Item1" class='red'>Item131</a></li>
                <li><a href="#Item2" class='red'>Item132</a></li>
                <li><a href="#Item3" class='blue'>Item133</a></li>
                <li><a href="#Item4">Item134</a></li>
                <li><a href="#Item5">Item135</a></li>

</ul>

还有CSS

.red {
...
}
.blue {
...
}

我希望这有帮助

Answer 3

您可以为特定列表项提供额外的类，以覆盖 booststrap 中的默认设计。

例如：

<ul class="dropdown-menu">
                <li><a href="#Item1" class="custom">Item1</a></li>
                <li><a href="#Item2">Item2</a></li>
                <li><a href="#Item3" class="custom">Item3</a></li>
                <li><a href="#Item4">Item4</a></li>
                <li><a href="#Item5" class="custom">Item5</a></li>

</ul>

然后在新的 css 文件中覆盖默认的自定义设计。

.custom{
    .....
}

Answer 4

我一直在尝试按照你的建议，但添加类和样式不起作用。

例如

    .red {
    color:red;
    }

但是

    .red {
     color:red !important; 
    }

开始工作 - 你能解释一下为什么吗？？？