Question

我刚刚开始学习Bootstrap并重新创建我的旧网站。我完成了我的导航，昨天我注意到有一个新的Bootstrap版本v3.3。该版本缺少以前的boostrap.css中的一些类，例如`nav-list＆＃39;我正在使用（下面）。那是常见的吗？我是否应该期待使用新的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]没有直接的等价物，但是列表组和.panel-groups是相似的。

以下是如何在Bootstrap 3中获得类似的行为：

使用.nav-pills.nav-stacked代替.nav-list
将.nav-header替换为.disabled
在<a>

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

Bootstrap 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将其添加回去。

Bootstrap v3.3.0 - 侧面导航

2 个答案: