需要Bootstrap左側導航示例

Question

尋找一些乾淨而簡單的示例來設置響應式左側導航，幾乎與Foundation使用它們的版本完全相同。 4文檔頁面http://foundation.zurb.com/docs/v/4.3.2/index.html需要能夠鏈接到頁面，並且如果在其下面分組有子頁面，也需要展開。任何良好的Bootstrap例子，這樣做？

Answer 1

看看這個例子。這是一個左側離帆布菜單，子菜單摺疊..

http://www.bootply.com/129625

/* collapsed sidebar styles */ 
@media screen and (max-width: 767px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all 0.25s ease-out; 
    -moz-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    } 
    .row-offcanvas-right 
    .sidebar-offcanvas { 
    right: -41.6%; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -41.6%; 
    } 
    .row-offcanvas-right.active { 
    right: 41.6%; 
    } 
    .row-offcanvas-left.active { 
    left: 41.6%; 
    } 
    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 41.6%; 
    } 
    #sidebar { 
    background-color:#3b3b3b; 
    padding-top:0; 
    } 
    #sidebar .nav>li { 
    color: #ddd; 
    background: linear-gradient(#3E3E3E, #383838); 
    border-top: 1px solid #484848; 
    border-bottom: 1px solid #2E2E2E; 
    } 
    #sidebar .nav>li:first-child { 
    border-top:0; 
    } 
    #sidebar .nav>li>a { 
    color: #ddd; 
    } 
    #sidebar .nav>li>a>img { 
    max-width: 14px; 
    } 
    #sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus { 
    text-decoration: none; 
    background: linear-gradient(#373737, #323232); 
    color: #fff; 
    } 
    #sidebar .nav .caret { 
    border-top-color: #fff; 
    border-bottom-color: #fff; 
    } 
    #sidebar .nav a:hover .caret{ 
    border-top-color: #fff; 
    border-bottom-color: #fff; 
    } 
}