Bootstrap 4.1.1页面调整：将激活切换项背景色改为白色

要实现激活状态的Tab切换项背景改为白色，只需在自定义CSS的激活状态样式中添加背景色属性，同时建议调整文字颜色提升辨识度。修改后的完整代码如下：

修改后的CSS代码 #

.nav-tabs {
  margin-top: 3%;
  border: none;
  background: #0062cc;
  border-radius: 1.5rem;
  width: 28%;
  float: right;
}

.nav-tabs .nav-link {
  padding: 2%;
  height: 34px;
  font-weight: 600;
  color: #fff;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.nav-tabs .nav-link:hover {
  border: none;
}

.nav-tabs .nav-link.active {
  width: 100px;
  color: #0062cc; /* 调整为深色，避免白色背景下文字不易辨认 */
  background-color: #fff; /* 添加白色背景 */
  border: 2px solid #0062cc;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

原HTML代码（无需改动） #

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<div class="col-md-9 register-right">
  <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
    </li>
  </ul>
</div>

注意：确保自定义CSS在Bootstrap官方CSS之后引入，这样自定义样式才能正确覆盖默认样式。

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