使用Bootstrap 4与3.3.7时，导航菜单出现错误
我正在使用附加的CSS和代码，我的<li>的高度被搞砸了。当使用bootstrap 4时，它太短了，但是在3.3.7中它可以工作。使用4“时的问题是什么？
Bootstrap 4有这样做的好方法吗？实现这一目标的最佳方法是什么？
这里还有另一个问题：Custom bootstrap 4 breadcrumbs arrow effect
没有答案。
我在Bootstrap 3中找到了多个示例，不是4而是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;
}回答 1
Stack Overflow用户
发布于 2019-05-14 02:58:45
从bootstrap3到bootstrap4，除了它的主要CSS单元从px更改为rem之外，导航组件还使用结构更简单的flexbox完全重写。
在bootstrap3中，它具有导航的默认样式
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;实际上，如果您将position: relative;和display: block;添加到bootstrap4示例中，它也能正常工作：https://jsfiddle.net/davidliang2008/ka83uLq6/4/
.nav-pills.nav-wizard > li a {
display: block;
padding: 10px 15px;
position: relative;
...
}在bootstrap4中，为类似的目的添加了nav-link类，并且您不必使用list来构建导航。您在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/
https://stackoverflow.com/questions/56116306
复制相似问题
腾讯云开发者
