适配Bootstrap 4的自定义流程导航栏问题求助

我帮你排查了Bootstrap 4下这个自定义流程导航栏的问题，核心原因是Bootstrap的默认.nav-pills样式和你的自定义CSS产生了冲突，比如默认的边距、内边距以及布局方式都打乱了箭头和导航项的对齐。下面是修复后的完整代码，以及关键改动的说明：

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 #

/* 适配Bootstrap 4的自定义流程导航栏样式 */
.nav-pills.nav-wizard {
  display: flex;
  align-items: stretch; /* 确保所有导航项高度一致 */
}

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  margin: 0 !important; /* 覆盖Bootstrap默认的li边距 */
  flex: 1; /* 让每个导航项自动平分宽度 */
  display: flex;
}

.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}

.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}

.nav-pills.nav-wizard > li > a {
  border-radius: 0;
  background-color: #eee;
  color: #333;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0; /* 固定内边距，保证导航项高度统一 */
  position: relative;
  z-index: 1; /* 确保文字在箭头之上，不被遮挡 */
}

/* 第一个和最后一个导航项的圆角处理 */
.nav-pills.nav-wizard > li:first-child > a {
  border-radius: 5px 0 0 5px;
  padding-left: 20px;
}

.nav-pills.nav-wizard > li:last-child > a {
  border-radius: 0 5px 5px 0;
  padding-right: 20px;
}

/* 右侧箭头样式（非最后一项） */
.nav-pills.nav-wizard > li:not(:last-child) > a:after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 0 26px 20px; /* 匹配导航项高度调整箭头尺寸 */
  border-color: transparent transparent transparent #eee;
  z-index: 0;
}

/* 左侧箭头样式（非第一项） */
.nav-pills.nav-wizard > li:not(:first-child) > a:before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 0 26px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 0;
}

/* Hover状态样式 */
.nav-pills.nav-wizard > li:hover:not(:last-child) > a:after {
  border-left-color: #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;
}

/* Active状态样式 */
.nav-pills.nav-wizard > li.active:not(:last-child) > a:after {
  border-left-color: #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;
  color: #fff;
}

• Flex布局适配：给.nav-wizard添加display:flex，让导航项自动平分宽度，同时设置li为flex:1，解决Bootstrap默认块级布局导致的宽度不均问题。
• 重置默认边距：用margin:0 !important覆盖Bootstrap 4中.nav-pills > li的默认margin-left，避免导航项错位。
• 箭头尺寸匹配：根据a标签的内边距重新计算箭头的border-width（这里设为26px，对应导航项总高度），解决箭头和导航项高度不匹配的错位问题。
• 层级优化：给a标签设置z-index:1，确保文字内容在箭头之上，不会被箭头图形遮挡。
• 圆角位置修正：给第一个和最后一个导航项的a标签添加左右内边距，让圆角显示在正确的位置，不会被箭头覆盖。

内容的提问来源于stack exchange，提问作者murday1983