twitter-bootstrap Twitter Bootstrap 类似于侧面的垂直导航栏

Twitter Bootstrap like vertical navigation bar on side

提问by vaibhav1312

I am new to bootstrap, and having a problem in creating navigation bar like bootstrap has.I invested lot of time trying it but unable to figure out. What I want is like

我是引导程序的新手，在创建像引导程序这样的导航栏时遇到了问题。我花了很多时间尝试它，但无法弄清楚。我想要的是

This is what i found here

这是我在这里找到的

<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
  <li class="active"><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
  <li class=""><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
  <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>
  <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li>
  <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li>
  <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li>
  <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li>
  <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li>
  <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
  <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
  <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
  <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
  <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li>
  <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
</ul>

回答by Krishna Murthy

Copy the css of bs-sidebar from docs.css of twitter bootstrap; add additional CSS that is separately defined at the bottom of the same file as below:

从twitter bootstrap的docs.css复制bs-sidebar的css；添加在同一文件底部单独定义的其他 CSS，如下所示：

CSS

CSS

.bs-sidebar .nav > .active > ul {
    display: block;
    margin-bottom: 8px;
}

HTML

HTML

<div class="bs-sidebar affix">
    <ul class="nav bs-sidenav">
        <li class="active"><a href="#">NAV1</a>
            <ul class="nav">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
            </ul>
        </li>
        <li><a href="#">NAV2</a></li>
    </ul>
</div>

回答by sk8terboi87 ツ

Did u check bootstrap nav bar -> stackable section, here?

您是否在此处检查了引导程序导航栏 -> 可堆叠部分？

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Looks like the same as you've asked... tried this?

看起来和你问的一样……试过这个吗？