时间戳

首页 > 解决方案 > CSS 更改 Bootstrap 4 导航选项卡的默认外观

css - CSS 更改 Bootstrap 4 导航选项卡的默认外观

问题描述

我创建了 Bootstrap 4 导航选项卡，如下所示：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">SavedAssets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
      aria-selected="false">SubmittedAssets</a>
  </li>
</ul>

我想将导航标签的默认外观更改为如下图所示： 标签图片

默认情况下，第一个选项卡应以蓝线突出显示，单击第二个选项卡后，蓝线将从第一个选项卡移动到第二个选项卡。

你能帮我写css吗？谢谢

标签： cssbootstrap-4tabs

解决方案

像这样添加，你可以得到你想要的精确结果，并且使用更少!important

片段CSS和下面CSS做同样的事情，但下面CSS是简单和更少的代码

.nav-tabs .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
    color: gray;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border-radius: 0;
    border-bottom: 2px solid blue;
}


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
.nav-tabs .nav-link {
    color: gray;
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid blue;
}
</style>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
        aria-selected="true">SavedAssets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
        aria-selected="false">SubmittedAssets</a>
    </li>
</ul>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

推荐阅读