Bootstrap 4 vs 3.3.7 的导航菜单出现错误

Question

我正在使用附加的 CSS 和代码，我的 <li> 的高度被搞砸了。使用 bootstrap 4 时它太短了，但它在 3.3.7 中有效。使用 4" 时有什么问题？

Bootstrap 4 有没有很好的方法来做到这一点？完成此任务的最佳方法是什么？

这里还有一个问题： Custom bootstrap 4 breadcrumbs arrow effect

没有答案。

我在 Bootstrap 3 中找到了多个示例，而不是 4 个。任何示例都将不胜感激。

示例 1： https://bootsnipp.com/snippets/44am

示例 2： 版本 3.3.7 https://jsfiddle.net/vjstg2zc/1/

版本 4 https://jsfiddle.net/cpLd4u5e/

HTML

<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

CSS

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
  border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
  border-radius: 0;
  background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #eee;
  z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
  position: absolute;
  content: "";
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
  border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
  border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
  background-color: #aaa;
  color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
  border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
  border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
  background-color: #428bca;
}

Answer 1

从 bootstrap3 到 bootstrap4，除了它的主要 CSS 单元已从 px 更改为 rem，navs 组件有使用结构更简单的 flexbox 完全重写。

在 bootstrap3 中，它具有 navs 的默认样式：

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;

事实上，如果您在 bootstrap4 示例中添加 position: relative; 和 display: block;，它也同样有效：https://jsfiddle.net/davidliang2008/ka83uLq6/4/:

.nav-pills.nav-wizard > li a {
    display: block;
    padding: 10px 15px;
    position: relative;
    ...
}

在bootstrap4 中，添加了nav-link 类用于类似目的，您不必使用列表构建navs。您在 bootstrap4 中看到高度不正确的原因仅仅是因为没有像 .nav > li > a 这样的嵌套结构。

既然你在 bootstrap4 中询问了最好的方法，让我看看我是否可以制作出你在 bootstrap4 中拥有的东西。

https://jsfiddle.net/davidliang2008/5xod17mw/41/

如果您使用 SASS/SCSS，您可以在样式中清理更多内容，因为您可以定义边框颜色等变量，并将 mixins 定义为设置右边框到正确的颜色。

在页面上居中

因为.nav 已经显示为flexbox。您可以通过在.nav 上添加.justify-content-center 轻松地将其居中：

<div class="container">
    <nav class="nav nav-pills nav-wizard justify-content-center">
        ...
    </nav>
</div>

https://jsfiddle.net/davidliang2008/5xod17mw/51/