html - 样式 Bootstrap 事件选项卡

Question

当我使用 nav-tabs-unstyled 类时，如何设置 Bootstrap 事件选项卡的样式。我浏览了网上的大量教程，但对我没有任何帮助。这是我认为应该有效的代码。 感谢您的帮助:)

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>

Answer 1

您不能将 block 级元素放在行内元素中。这意味着你不能把 <li>里面<a> .当你把它放在你的 html 代码中时，li是 a 的 child , 但你的 css 规则定义了 a作为 li 的 child :

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