引导如何样式导航列表

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>

Css是bootstrap，我想做一些修改的颜色。但是，当我在

中进行更改时

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

它改变所有列表元素的颜色。是否有可能样式嵌套列表在不同的颜色，而等级列表有一个不同的?

。"Item0, Item13, Item23, Item33"， "Item1 .. "Item5"蓝色的"等等……

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

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

。

    .red {
    color:red;
    }

,

    .red {
     color:red !important; 
    }

开始工作-你能告诉我为什么吗??