使用class时如何设置Bootstrap活动选项卡的样式nav-tabs-unstyled。我已经遍历了网络上的大量教程，但对我来说没有任何用处。这是我认为应该可以使用的代码。感谢您的任何帮助 ：）
SCSS
.event-menu {
a {
color: #666666;
text-decoration: none;
}
.nav-tabs-unstyled > li.active > a,
.nav-tabs-unstyled > li.active > a:focus,
.nav-tabs-unstyled > li.active > a:hover {
border: 1px solid #666666 !important;
}
ul {
margin-right: 0!important;
list-style-type: none;
padding-left: 10px!important;
li {
width: 100%;
margin-bottom: 5px;
padding: 10px;
font-weight: 400;
border: 1px solid #fff;
&:hover {
border: 1px solid #666666;
}
span {
font-size: 120%;
}
}
}
}
的HTML
<div class="event-menu">
<ul class="nav-unstyled nav-tabs-unstyled">
<a href="#tab1" data-toggle="tab"><li class="active">abcd<br>
<span>aaa</span></li></a>
<a href="#tab2" data-toggle="tab"><li>ssssss<br>
<span>vvvv</span></li></a>
<a href="#tab3" data-toggle="tab"><li>ddddd<br>
<span>nnnn</span></li></a>
</ul>
</div>
您不能将块级元素放入内联元素中。这意味着你不能把<li>里面<a>。就像您在html代码中所说的那样，它li是的子a元素，但您的css-rules定义a为的子元素li：
.nav-tabs-unstyled > li.active > a...
这条规则行不通。
要设置活动标签的样式<li class="active">，您必须为定义样式，因此css规则应如下所示：
.nav-tabs-unstyled > li.active {
border: 1px solid #666666 !important;
background-color: #9d9;
}
要突出显示悬停，请li定义规则：
.nav-tabs-unstyled > li:hover{
border: 1px solid #669;
background-color: #99d;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句