我是 bootstrap 的新手,在创建像 bootstrap 这样的导航栏时遇到了问题。我花了很多时间尝试它,但无法弄清楚。
我想要的就像
这是我发现的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>
最佳答案
从 twitter bootstrap 的 docs.css 中复制 bs-sidebar 的 css;
添加在同一文件底部单独定义的附加 CSS,如下所示:
CSS
.bs-sidebar .nav > .active > ul {
display: block;
margin-bottom: 8px;
}
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>
关于twitter-bootstrap - Twitter Bootstrap 像侧面的垂直导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17124761/