删除引导选项卡式导航下的行

【问题标题】：Remove line under bootstrap tabbed navigation删除引导选项卡式导航下的行
【发布时间】：2022-02-15 15:27:56
【问题描述】：

我正在使用bootstrap 最新版本开发一个页面，并为页面使用选项卡式导航。我想知道如何删除选项卡式导航下的行。

这是我的头像

【问题讨论】：

【解决方案1】：

通过将border-bottom css设置为0px来覆盖默认的引导选项卡式导航样式

<ul class="nav nav-tabs" style="border-bottom:0px">
  <li class="active">
     <a href="#">Home</a> 
  </li> 
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">Practice Editor </a></li> 
  <li><a href="#">Gallery</a></li> 
  <li><a href="#">Contact</a></li> 
</ul>

【讨论】：

【解决方案2】：

打开引导程序并将border-bottom-color: transparent; 覆盖到类.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > i.active > a:focus 下的边框-bottom-color: #ffffff;

【讨论】：

【解决方案3】：

将"border-bottom-0" 类添加到ul 标记。

<ul class="nav nav-tabs border-bottom-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

【讨论】：