Question

使用this as a my starting template。我正在尝试整合扩展子类别的引导方式，如getting started page of getbootstrap的侧边栏所示。

但是，我遇到了滚动浏览页面的问题，如果我到达类别或其子类别，它会突出显示侧栏中类别的所有部分（而不仅仅是子类别）。

以下是我的侧边栏HTML的摘要：

<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
    <li class="active">
        <a>User Guide</a>
        <ul class="nav">
            <li>
                <a href="#intro">Introduction</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#search">Searching</a>
        <ul class="nav">
            <li>
                <a href="#searchresults">Search Results</a>
                <a href="#understandingsearch">Understanding Search Results</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#profile">User Profile</a>
        <ul class="nav">
            <li>
                <a href="#viewprofile">Viewing a Profile</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#eventgraph">Event Graph</a>
        <ul class="nav">
            <li>
                <a href="#graphdisplay">Graph Display</a>
                <a href="#graphinteraction">Graph Interaction</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#infopanel">Information Panel</a>
        <ul class="nav">
            <li>
                <a href="#paneldisplay">Panel Display</a>
            </li>
        </ul>
    </li>
</ul>
</div>

和CSS：

body {
    padding-top:50px;
}

#masthead {
    min-height:250px;
}

#masthead h1 {
    font-size: 30px;
    line-height: 1;
    padding-top:20px;
}

#masthead .well {
    margin-top:8%;
}

@media screen and (min-width: 768px) {
    #masthead h1 {
        font-size: 50px;
    }
}

.navbar-bright {
    background-color:#111155;
    color:#fff;
}

.affix-top,.affix{
    position: static;
}

@media (min-width: 979px) {
    #sidebar.affix-top {
        position: static;
        margin-top:30px;
        width:228px;
    }

    #sidebar.affix {
        position: fixed;
        top:70px;
        width:228px;
    }
}

#sidebar li.active {
    font-weight: bold;
    border:0 #CC0000 solid;
    border-right-width:5px;
}

/* Nav: second level */
#sidebar .nav {
    display: none;
}

#sidebar > li.active .nav {
    display: block;
}

#sidebar .nav {
    margin-bottom: 8px;
}

#sidebar .nav > li > a {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 30px;
    font-size: 90%;
}

我还包括JSFiddle来展示我所看到的内容：http://jsfiddle.net/HsZ9q/8/

请注意，在JSFiddle中，您必须将窗口扩展到尽可能大，直到您看到侧栏由于响应性。

Answer 1

我认为你的css为<li>元素添加了一个边框：活动你应该对<a>元素进行操作。同样在子菜单上，每个元素必须位于<li>

上

希望有所帮助

http://jsfiddle.net/HsZ9q/12/

#sidebar li.active > a{
    font-weight: bold;
    border:0 #CC0000 solid;
    border-right-width:5px;
}

<!--left-->
<div class="col-md-3" id="leftCol">
    <ul class="nav nav-stacked" id="sidebar">
        <li class="active">
            <a>User Guide</a>
            <ul class="nav">
                <li>
                    <a href="#intro">Introduction</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#search">Searching</a>
            <ul class="nav">
                <li>
                    <a href="#searchresults">Search Results</a>
                </li>
                <li>
                    <a href="#understandingsearch">Understanding Search Results</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#profile">User Profile</a>
            <ul class="nav">
                <li>
                    <a href="#viewprofile">Viewing a Profile</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#eventgraph">Event Graph</a>
            <ul class="nav">
                <li>
                    <a href="#graphdisplay">Graph Display</a>
                </li>
                <li>
                    <a href="#graphinteraction">Graph Interaction</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#infopanel">Information Panel</a>
            <ul class="nav">
                <li>
                    <a href="#paneldisplay">Panel Display</a>
                </li>
            </ul>
        </li>
    </ul>
</div><!--/left-->

Bootstrap边栏扩展子类别

1 个答案: