twitter-bootstrap-3 - Bootstrap 4 vs 3.3.7 的导航菜单出现错误

问题描述

我正在使用附加的 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;
}

标签： twitter-bootstrap-3bootstrap-4

解决方案

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

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

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

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

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

在bootstrap4中，nav-link为类似目的添加了类，您不必使用列表构建导航。您在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/