我正准备将我的网站更新为 Bootstrap 3，但我不知道如何替换Bootstrap 2中的nav-list类。
我查看了列表组，但我不确定这是否用于替换导航列表。如何使以下标记在 Bootstrap 3 中工作？
<div class="well">
<ul class="nav nav-list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
这是我想要的样子：http: //jsfiddle.net/bplumb/2Nguy/
迁移到 v3.x –.nav-list 已删除内容中记录了删除：
Nav lists
.nav-list.nav-header
没有直接的等价物，但list groups和.panel-groups是相似的。
我在“WIP：Bootstrap 3”拉取请求内的更改日志中发现了此更改：
- 删除
.nav-list选项。替换为新.list-group组件。
因此，如果我将您的代码翻译为使用.list-group，我会得到：
<div class="well">
<ul class="list-group">
<li class="list-group-item"><a href="#">Link 1</a></li>
<li class="list-group-item"><a href="#">Link 2</a></li>
</ul>
</div>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<ul class="list-group">
<li class="list-group-item"><a href="#">Link 1</a></li>
<li class="list-group-item"><a href="#">Link 2</a></li>
</ul>
</div>但是，这看起来与它在 Bootstrap 2 中的方式不同。正如我在这个答案的评论中指出的那样，似乎没有.nav-list与 Bootstrap 3 完全等效的内置功能。因此，如果您需要.list-group没有的功能，您必须自己编写 CSS，或者尝试从 Bootstrap 2 移植它。
我用过class="nav nav-pills nav-stacked"，对我来说这是一个更好的替代品。但也许它在 3.0.2 版本中得到了解决。
以下 .less 将nav-list或多或少地带回 2.3.2 中的情况：
@import "../bootstrap/variables.less"; // replace with path to bootstrap variables.less
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @line-height-small;
color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: @body-bg;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
生成的 CSS 是：
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 1.5;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #428bca;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
.nav-list .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
在正常引导资产之后包括 CSS 或 LESS。
我创建了一个 gist，它从 bootstrap 2.3.2 中获取 nav-list，填充了一些在 3.0 中不可用的同名变量，并解决了 mixin 依赖项。这都是直接的默认设置，并且（到目前为止）似乎可以很好地与更新的 bootstrap 3.0 井一起使用，这是我主要使用它的地方。