Question

我正在使用bootstram菜单和两个级别列表一起使用下拉菜单。代码的例子：

<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{
 ...
 }

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

e.g。 “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

我一直在努力让你觉得自己很难，但是添加一个类和样式不起作用。

e.g。

    .red {
    color:red;
    }

但

    .red {
     color:red !important; 
    }

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

Bootstrap如何设置导航列表的样式

4 个答案: