Bootstrap 4.6 垂直pills搭配水平tabs选中不高亮及样式异常求助

问题根因 #

1. 水平Tab使用了Bootstrap 3的语法结构，不符合Bootstrap 4.6的规范，导致切换时active类无法正确挂载到对应元素上，高亮失效
2. 自定义CSS选择器存在语法错误，且多余的样式覆盖了Bootstrap默认的Tab间距规则

具体修改方案 #

1. 修正水平Tab的HTML结构

将原有水平Tab的<ul class="nav nav-tabs">块替换为以下符合Bootstrap 4规范的代码：

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#first" data-toggle="tab" role="tab" aria-controls="first" aria-selected="true">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#second" data-toggle="tab" role="tab" aria-controls="second" aria-selected="false">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#third" data-toggle="tab" role="tab" aria-controls="third" aria-selected="false">Menu 3</a>
  </li>
</ul>

修改点说明：

• 给每个li元素添加nav-item类
• 给每个a标签添加nav-link类
• 将原来加在li上的active类转移到对应a标签的nav-link上
• 补充了Bootstrap 4要求的可访问性属性，避免异常

2. 修正自定义CSS样式

你原有CSS中关于nav-tabs的自定义代码存在错误的嵌套选择器，且内容和Bootstrap默认样式重复，建议直接删除以下片段：

.profile-posts .nav-tabs > li.active > a, .profile-posts .nav-tabs > .profile-posts li.active > a:focus, .profile-posts .nav-tabs > li.active > a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
        border-bottom-color: rgb(221, 221, 221);
    border-bottom-color: transparent;
}

如果需要自定义Tab高亮样式，可替换为以下正确的选择器：

/* 自定义Tab高亮样式，按需调整参数 */
.profile-posts .nav-tabs .nav-link.active, 
.profile-posts .nav-tabs .nav-link:focus, 
.profile-posts .nav-tabs .nav-link:hover {
  color: #555;
  background-color: #fff;
  border-color: #ddd #ddd transparent;
}
/* 自定义Tab之间的间距，按需调整数值 */
.profile-posts .nav-tabs .nav-item {
  margin-right: 6px;
}

修改完成后，Tab选中高亮和间距异常的问题都会同步解决。

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