css - 模式引导中的活动选项卡时加下划线

Question

我有模态显示 2 个选项卡，如下图所示

我试过了：

<div class="modal-body">
        <div role="tabpanel">
            <ul class="list-unstyled nav nav-tabs" role="tablist">
              <li class="active" role="presentation">
                <a id="aFirst" href="#vaccinationHistory" aria-controls="vaccinationHistory" role="tab" data-toggle="tab">Vaccination history</a>
              </li>
              <li role="presentation" >
                <a href="#editVacciation" aria-controls="editVacciation" role="tab" data-toggle="tab">Add / edit vaccination</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="vaccinationHistory">
......

CSS

    .nav-tabs {
      border-bottom: none;
    }
   .nav-tabs li a {
     color:#000;
   }

   .nav-tabs li a:focus {
     color:#0f9aee;
     text-decoration: underline;
   }

但是结果：但是和字母太近了

标签： cssbootstrap-4