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

What replaces nav lists in Bootstrap 3?

提问by Blake Plumb

I am preparing to update my site to Bootstrap 3, but I can't figure out how to replace the nav-listclass from Bootstrap 2.

我正准备将我的网站更新到 Bootstrap 3，但我不知道如何替换Bootstrap 2 中的nav-list类。

I looked into list groups, but I am not sure if this is to be used to replace nav lists. How would I make the below markup work in Bootstrap 3?

我查看了列表组，但我不确定这是否用于替换导航列表。我如何使以下标记在 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>

EDIT

编辑

This is the look I am going for: http://jsfiddle.net/bplumb/2Nguy/

这是我想要的外观：http: //jsfiddle.net/bplumb/2Nguy/

采纳答案by Rory O'Kane

EDIT

编辑

The removal of .nav-listhas been documentedin Migrating to v3.x – What's removed:

的去除.nav-list已被记录在迁移到3.x版-内容删除内容：

Nav lists
.nav-list.nav-header
No direct equivalent, but list groupsand .panel-groupsare similar.

导航列表
.nav-list.nav-header
没有直接的等价物，但列表组和.panel-groups是相似的。

---

---

I found this change listed in the changelog inside the “WIP: Bootstrap 3” pull request:

我在“WIP：Bootstrap 3”拉取请求中的变更日志中发现了此更改：

• Remove .nav-listoption. Replaced by the new .list-groupcomponent.

• 删除.nav-list选项。替换为新.list-group组件。

So if I translate your code to use .list-groupinstead, I get this:

因此，如果我将您的代码翻译为使用.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>

However, this does not look identical to the way it did in Bootstrap 2. As I notedin this answer's comments, there seems to be no exact .nav-listequivalent built-in to Bootstrap 3. So if you need features that .list-groupdoesn't have, you will have to write the CSS yourself, or try to port it from Bootstrap 2.

但是，这看起来与 Bootstrap 2 中的方式不同。正如我在此答案的评论中所指出的，.nav-listBootstrap 3似乎没有完全等效的内置功能。因此，如果您需要.list-group没有的功能，您将不得不自己编写 CSS，或者尝试从 Bootstrap 2 移植它。

回答by gungott

I used class="nav nav-pills nav-stacked"and for me it's a better styled replacement. But perhaps it is resolved in version 3.0.2.

我用过class="nav nav-pills nav-stacked"，对我来说它是一个更好的样式替代品。但也许它在 3.0.2 版本中得到解决。

回答by moribvndvs

The following .less will bring back nav-listmore or less as it was in 2.3.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();
}

The resulting CSS is:

生成的 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;
}

Include the CSS or the LESS after the normal bootstrap asset.

在正常引导资产之后包含 CSS 或 LESS。

回答by jimbojsb

I created a gist that takes nav-list from bootstrap 2.3.2, fills in some variables that aren't available in 3.0 under the same name, and resolves a mixin dependency. It's all straight defaults, and seems (so far) to play well with updated bootstrap 3.0 wells, which is where I primarily use it.

我创建了一个 gist，它从 bootstrap 2.3.2 中获取导航列表，填充了一些在 3.0 中不可用的同名变量，并解决了混合依赖项。这都是直接的默认值，并且似乎（到目前为止）与更新的引导程序 3.0 井一起玩得很好，这是我主要使用它的地方。

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

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

回答by HolloW

For me the replace was:

对我来说，替换是：

nav nav-pills

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

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

Under the title "Adapts to active nav states"

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