Question

我准备将我的网站更新为Bootstrap 3，但我无法弄清楚如何替换the nav-list class from Bootstrap 2。

我查看了list groups，但我不确定是否要将其用于替换导航列表。如何在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/

Answer 1

修改

删除has been documented中的.nav-list Migrating to v3.x – What’s removed：

导航列表
  .nav-list .nav-header
  没有直接等效，但list groups和.panel-groups相似。

我发现“WIP: Bootstrap 3” pull request中的更改日志中列出了此更改：

删除.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中的方式不同。在本回答的评论中我noted，似乎没有与Bootstrap 3完全相同的.nav-list内置函数。因此，如果您需要.list-group没有的功能，您必须自己编写CSS，或尝试从Bootstrap 2移植它。

Answer 2

我使用了class="nav nav-pills nav-stacked"，对我而言，它是一个更好的风格替代品。但也许它已在版本3.0.2中得到解决。

Answer 3

以下.less会像2.3.2中那样或多或少地带回nav-list：

@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;
}

在正常的bootstrap资产之后包含CSS或LESS。

Answer 4

我创建了一个从bootstrap 2.3.2获取nav-list的要点，填写了3.0中同名的不可用的变量，并解析了mixin依赖。这是所有直接的默认值，并且似乎（到目前为止）可以很好地使用更新的bootstrap 3.0井，这是我主要使用它的地方。

https://gist.github.com/jimbojsb/6754116

Answer 5

对我来说，替换是：

nav nav-pills

https://getbootstrap.com/docs/3.4/components/#badges

在标题“适应活动的导航状态”下

什么取代了Bootstrap 3中的导航列表？

修改

5 个答案:

修改