Javascript 在 bootstrap 程序中自定义导航选项卡

首先，你需要从ul.nav元素中go 掉nav-justified和mb-4个类，因为这会将导航设置为flex-grow: 1，并在按钮下方留有边距，这会使按钮伸展以填充空间，并将按钮放在栏的顶部，下方留有空间.根据您的示例图像，这不是您想要的.我还从HTML中删除了内联CSS，您几乎应该始终避免这种情况，尤其是当您需要在多个元素上重复相同的CSS时.把你的CSS和你的CSS放在一起.我还向名为.nav-wrapper的div.col-7元素添加了一个类.这样我就可以对其应用样式，而无需在项目中使用.col-7类的任何其他地方添加样式.

<div class="row justify-content-center">
  <div class="nav-wrapper col-7">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="CGM-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
      </li>
    </ul>
  </div>
</div>

这是我写的CSS，让它接近您的示例图像.必须使用一些比通常需要的更具体的 Select 器，以便比使用!important的bootstrap CSS具有更高的特异性分数.我删除了"Remora"字体的sans-serif回退，因为bootstrap将在正文中有一个完整的字体系列回退堆栈，因此如果找不到Remora，或者在加载之前，字体系列将根据该堆栈(其中也包含无衬线)进行设置.我冒昧地为按钮添加了:hover个状态.这只是在其上方添加蓝色边框，并将背景 colored颜色 更改为白色，就像.active按钮一样，但不更改文本 colored颜色 .

.nav-wrapper {
  background-color: #f1f1f1; 
}

.nav-wrapper > .nav {
  display: flex;
  justify-content: center;
  border: 0;
  margin-top: 1rem;
}

.nav-item > .nav-link {
  border: 0;
  color: #555;
  font-family: 'Remora';
  font-weight: 700;
}

.nav-item > .nav-link:hover,
.nav-item > .nav-link.active {
  background-color: #fff;
  border-color: #0a58ca;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-radius: 0;
}

.nav-item > .nav-link.active {
  color: #0a58ca;
}

由于这使用了 bootstrap ，您不能在这里以本机方式显示结果，因此，您可以查看示例并使用代码进行自定义.

Here is a screenshot of the finished product in the default state:

如果你有任何问题，请告诉我.