导航菜单在Bootstrap 4与3.3.7中出现错误

Question

我正在使用随附的CSS和代码，而我的<li>的高度越来越高。使用引导程序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

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

在 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 。您可以通过在.justify-content-center上添加.nav来轻松地使其项目居中：

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

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