CSS, чтобы изменить внешний вид Nav-вкладок Bootstrap 4 по умолчанию

Question

Я создал Bootstrap 4 Nav-tabs, как показано ниже:

<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 для этого? Спасибо

Answer 1

Добавьте вот так, вы можете получить точный результат, который вы хотите, и с меньшим использованием !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>

Answer 2

В вашем собственном CSS-файле просто переопределите стили начальной загрузки. Пример:

.nav-link {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid grey !important;
  border-color: none !important;
}

.nav-link.active {
  border-bottom: 2px solid blue !important;
  color: #000000 !important;
}