类似 Twitter Bootstrap 的垂直导航栏（侧边栏）

Question

我是新手，正在学习Bootstrap，但在创建类似于Bootstrap的导航栏时遇到了问题。我花费了很多时间尝试，但无法弄清楚。

我想要的效果如下图所示：

我在这里找到了一些资料：https://dev59.com/tmzXa4cB1Zd3GeqPXspp

<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>

- vaibhav1312

---

你到目前为止尝试了什么？ - sk8terboi87 ツ

那么哪里出了问题？您是否希望菜单像这样“附着”在侧边栏上：http://www.bootply.com/63708？ - Carol Skelly

Answer 1

从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>

- Krishna Murthy

---

你的回答也救了我的一天。现在我只需要让它变成彩色。 - DrinkJavaCodeJava

Answer 2

你有没有查看过Bootstrap导航栏中的可堆叠部分，请点击这里？

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

看起来与您所问的相同...尝试过这个了吗？

- sk8terboi87 ツ

---

是的，我尝试过了，它会给出堆叠选项卡，但这不是我想要的。 - vaibhav1312

我想要与上面的Bootstrap快照相同的东西。 - vaibhav1312

你已经得到了页面的源代码。检查一下他们在代码中使用了哪些类/样式，然后在你的代码中应用它们，你就会得到相同的结果。他们使用自定义样式来定制他们的导航栏... - Dmitry Efimenko