Bootstrap v3.3.0 - 侧边导航

Question

我刚开始学习 Bootstrap 并重新创建我的旧网站。我完成了侧导航，昨天我注意到有一个新的 Bootstrap 版本 v3.3。该版本缺少以前的 boostrap.css 的一些类，例如我使用的“导航列表”（如下）。这很常见吗？我应该期望使用新的 Boostrap 版本来放松课程吗？ 这没什么大不了的，我当然可以创建自己的。 Bootstrap examples 甚至不要演示可堆叠的侧导航！我是否缺少指向某个文件的链接？

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Seciton Header</li>
        <li class="active"><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li class="nav-header">Seciton Header 2</li>
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
    </ul>
</div>

Answer 1

.nav-list 是 Twitter Bootstrap 2 的一部分，而我们在这里谈论的是 Bootstrap 3...这是正常的，一个新的版本会带来重大的变化，比如删除的功能和新的功能.

看看Bootstrap migration guide。你会看到：

[.nav-list has] 没有直接等效项，但列表组和 .panel-groups 相似。

以下是在 Bootstrap 3 中获得类似行为的方法：

• 使用.nav-pills.nav-stacked 而不是.nav-list
• 将.nav-header 替换为.disabled
• 将“导航标题”内容包装在<a> 中

Twitter 引导程序 2.3：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Seciton Header</li>
        <li class="active"><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li class="nav-header">Seciton Header 2</li>
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
    </ul>
</div>

引导 3.3：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
  <ul class="nav nav-pills nav-stacked">
    <li class="disabled"><a>Seciton Header</a></li>
      <li class="active"><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
    <li class="disabled"><a>Seciton Header</a></li>
      <li><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
  </ul>
</div>

Answer 2

这里提到：What replaces nav lists in Bootstrap 3?

从 2.x 迁移到 3.0 中记录了 .nav-list 的删除

在第二个答案中还提到了如何将其添加回来，使用less或css。