如何移除MDB Bootstrap带菜单项标签页的底部边框，实现普通Bootstrap效果

嘿，我刚好碰到过类似的问题！MDB Bootstrap的标签页默认自带了额外的底部边框样式，要改成普通Bootstrap的效果其实很简单，只需要自定义CSS覆盖掉它的默认样式就行。

核心思路 #

MDB给.nav-tabs和激活状态的标签项加了特定的边框样式，我们需要用更高优先级的CSS规则把这些样式覆盖掉，还原成普通Bootstrap的样子。

具体解决方案 #

1. 移除标签页容器的底部边框 #

首先，去掉整个标签栏的底部边框：

.nav-tabs {
  border-bottom: none !important;
}

加!important是因为MDB的样式优先级比较高，确保我们的规则能生效。

2. 调整激活标签的样式 #

普通Bootstrap里，激活的标签只有底部一条下划线，所以我们要把MDB给激活标签加的上下左右边框去掉，只保留底部的高亮线：

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border: none !important;
  border-bottom: 2px solid #007bff !important; /* 这里的颜色可以根据你的主题调整 */
  background-color: transparent !important; /* 去掉MDB默认的激活背景色 */
}

3. 优化下拉菜单的对齐 #

如果你的标签页带下拉菜单，还要调整下拉菜单的样式，让它和激活标签的下划线对齐：

.nav-tabs .dropdown-menu {
  border-top: none !important;
  margin-top: -2px !important; /* 让菜单顶部和激活标签的下划线对齐 */
}

完整示例代码 #

把这些CSS和你的MDB标签页HTML结合起来，效果就和普通Bootstrap完全一致了：

<!-- MDB标签页结构 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-mdb-toggle="tab" data-mdb-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-mdb-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" id="profile-tab" data-mdb-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
      <li><a class="dropdown-item" id="contact-tab" data-mdb-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
    </ul>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact content</div>
</div>

<!-- 自定义CSS -->
<style>
.nav-tabs {
  border-bottom: none !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border: none !important;
  border-bottom: 2px solid #007bff !important;
  background-color: transparent !important;
}

.nav-tabs .dropdown-menu {
  border-top: none !important;
  margin-top: -2px !important;
}
</style>

这样设置后，你的MDB标签页就会完全呈现出普通Bootstrap标签页的效果——没有底部边框，激活标签只有一条下划线，下拉菜单也完美对齐啦！

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