Html 带或不带Twitter引导的嵌套侧栏

可以用twitter引导创建嵌套的左侧边栏吗？ 我查看了他们的教程，但找不到。 我想制作一个带有一些列表的侧栏，每个列表都包含嵌套列表，默认情况下这些列表是隐藏的，当用户将鼠标悬停在列表上时，隐藏的选项应该是可见的

<div class="span2">  
    <div class="well sidebar-nav">  
        <ul class="nav nav-list">  
            <li class="nav-header">Categories</li>  
            <li class="divider"></li>
            <li><a href="#">Books</a> 
                              <ul>
                                  <li><a href="#">Science Books</a></li>
                                  <li><a href="#">Computer Books</a></li>
                                  <li><a href="#">History Books</a></li>
                               </ul>
                            </li>  
            <li><a href="#">Electronics</a></li> 
                                <ul>
                                  <li><a href="#">TV</a></li>
                                  <li><a href="#">Freezer</a></li>
                                  <li><a href="#">Radio</a></li>
                                </ul> 
            <li><a href="#">Computer</a></li>
        </ul>  
    </div> 
</div>

类别

有可能用twitterbootstarp实现吗？如果没有其他解决方案

---

谢谢

您可以将折叠插件与well+nav类混合使用

是的，您可以这样做，请参见下面给出的链接

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
            <a class="brand" href="#">Brand X</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="#">Regular Link</a></li>                    
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Basic List <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li>
                            <li><a href="#">Ipsum</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nested Lists<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="nav-header">Top Stuff</li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                    <li><a href="#">Bat</a></li>                                
                                </ul>        
                            </li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                </ul>    
                            </li>
                            <li><a href="#">Sit</a></li>
                            <li><a href="#">Amet</a></li>
                            <li><a href="#">Dolor</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Other Stuff</li>
                            <li><a href="#">Foo</a></li>
                            <li><a href="#">Bar</a></li>
                            <li><a href="#">Bat</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

.nav li.dropdown ul.dropdown-menu li.nav-list:hover {
    background: #08c;
    color: #fff;
    cursor: pointer;    
}

.nav li.dropdown ul.dropdown-menu .nav-list {
    font-size: 13px;
    color: #333;
    float: none;
    line-height: 21px;
}

.nav li.dropdown ul.dropdown-menu li:hover ul {
    display:block;
    position:absolute;
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.nav li.dropdown ul.dropdown-menu ul {
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -27px;
}

.nav li.dropdown ul.dropdown-menu .nav-list .caret {
    border-bottom-color: #999;
    border-top-color: #999;
    float: right;
}

.nav li.dropdown ul.dropdown-menu .nav-list:hover .caret {
    margin-left: 6px;
    margin-top: 5px;
    margin-right: 1px;
    border-right: 0;
    border-left: 4px solid #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.nav li.dropdown ul .nav-list .dropdown-menu:after {
    top: 8px;
    left: -12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
}

.nav li.dropdown ul .nav-list .dropdown-menu:before {
    left: -7px;
    border-left: 0;
    top: 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(0,0,0,0.05);
}

最重要的东西
嵌套列表






嵌套列表









其他资料






.nav li.下拉菜单ul.下拉菜单li.导航列表：悬停{
背景：#08c；
颜色：#fff；
光标：指针；
}
.nav li.dropdown ul.dropdown-menu.nav list{
字体大小：13px；
颜色：#333；
浮动：无；
线高：21px；
}
.nav li.dropdown ul.dropdown-menu li:悬停ul{
显示：块；
位置：绝对位置；
左：100%；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}
.nav li.下拉菜单ul.下拉菜单ul{
显示：无；
浮动：对；
位置：相对位置；
顶部：自动；
利润上限：-27px；
}
.nav li.dropdown ul.dropdown-menu.nav list.caret{
边框底色：#999；
边框顶部颜色：#999；
浮动：对；
}
.nav li.dropdown ul.dropdown-menu.nav列表：悬停.插入符号{
左边距：6px；
边缘顶部：5px；
右边距：1px；
右边界：0；
左边框：4px实心#fff；
边框顶部：4倍实心透明；
边框底部：4px实心透明；
}
.nav li.下拉菜单ul.导航列表.下拉菜单：之后{
顶部：8px；
左-12px；
边框顶部：6px实心透明；
边框底部：6px实心透明；
右边框：6px实心#fff；
}
.nav li.下拉菜单ul.导航列表.下拉菜单：之前{
左：-7px；
左边框：0；
顶部：7px；
边框顶部：7px实心透明；
边框底部：7px实心透明；
右边框：7px实心rgba（0,0,0,0.05）；
}

---

您可以将折叠插件与well+nav类混合使用@Oswaldo Acuan它可以点击并显示下面隐藏的内容。我需要换一下js吗？另外，我不知道为什么fiddle中的javascript不起作用，但在我的开发环境中效果很好。@Oswaldo Acuan它也不适用于我：（打开此页面，尝试通过firebug执行javascript（不带$（document）.ready（）