Question

当我使用班级position:relative; top: -1px;时，如何设置Bootstrap活动标签的样式。我已经通过网络上的大量教程，但没有什么能为我工作。这是我认为应该工作的代码。谢谢你的帮助:)）

SCSS

nav-tabs-unstyled

HTML

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

Answer 1

您不能将块级元素放在内联元素中。这意味着您无法将<li>放入<a>。当您将其放在html代码中时，li是a的孩子，但您的css规则将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;
        }

Style Bootstrap活动选项卡

1 个答案: