Twitter bootstrap 3 导航菜单与引导程序4与3.3.7相比出现错误

我正在使用附带的CSS和代码，我的

的高度被搞砸了。使用Bootstrap4时它太短了，但在3.3.7中它可以工作。使用“4”时有什么问题

Bootstrap4是否有一个很好的方法来实现这一点？实现这一点的最佳方法是什么？ 这里还有另外一个问题：

没有回答

我在Bootstrap3中发现了多个示例，不是，而是4。任何示例都将不胜感激

例1：

例2： 版本3.3.7

版本4

HTML 从bootstrap3到bootstrap4，除了其主要CSS单元已从

px

更改为

rem

，navs组件已使用结构更简单的flexbox完全重写

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

.nav>li>a{
位置：相对位置；
显示：块；
填充：10px 15px；

事实上，如果在bootstrap4示例中添加

position:relative；

和

display:block；

，它也会起作用：

.nav-pills.nav-wizard>li a{
显示：块；
填充：10px 15px；
位置：相对位置；
...
}

在bootstrap4中，添加了

nav link

类用于类似目的，并且您不必使用list构建nav。您在bootstrap4中看到高度不正确的原因仅仅是因为不再存在类似

.nav>li>a

的嵌套结构

既然您已经询问了在bootstrap4中实现此功能的最佳方法，那么让我看看是否可以设计出您在bootstrap4中拥有的功能

如果您使用的是SASS/SCSS，那么您可以在样式中清理更多内容，例如可以为边框颜色等定义变量，并将mixin定义为将右边框设置为正确颜色的函数

把它放在页面中央 由于

.nav

已显示为flexbox。您可以通过在

.nav

上添加

.justify content center

轻松将其项目居中：

...

---

有什么建议可以让它更具响应性吗？请解释一下你在想什么样的响应性？对我来说，它已经具有响应性，因为它将在较小的屏幕上显示，但当然还有很多改进空间，可以使它更漂亮。我已经添加了一个演示，说明如何在页面上居中显示它。关于响应性，我将留下这一个给你。我觉得我在这里付出的太多了：）添加页边底部：1rem；让面包屑看起来很漂亮，在一个反应迅速的网站上看起来也很棒。谢谢。

<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>

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