Bootstrap 4選項卡（藥丸）加下劃線

Question

我想Bootstrap 4選項卡（或藥丸）被渲染下劃線。

像這樣：

缺省引導4有沒有這樣的風格。

Answer 1

我有一個新的類.nav-pills-underline和基於Bootstrap 4變量的解決方案。

在sass文件中相應地更改變量。

mynavs.scss

$nav-pills-underline-link-active-color: $link-color !default; 
$nav-pills-underline-link-hover-color: $link-hover-color !default; 

$nav-pills-underline-bg: transparent !default; 
$nav-pills-underline-active-bg: transparent !default; 
$nav-pills-underline-hover-bg: transparent !default; 

$nav-pills-underline-border-width: 3px !default; 
$nav-pills-underline-border-color: map-get($theme-colors, "secondary"); 



.nav-pills-underline{ 
    .nav-link { 
    @include border-radius(0); 

    &.active, 
    .show > & { 
     color: $nav-pills-underline-link-active-color; 
     //background-color: $nav-pills-underline-active-bg; 

    } 
    } 

    > li.nav-item { 
    > a.nav-link{ 

     background-color: $nav-pills-underline-bg !important; 

     border-bottom-width: $nav-pills-underline-border-width; 
     border-bottom-style: solid; 
     border-bottom-color: transparent; 
    } 

    > a.nav-link.active, 
    > a.nav-link.active:hover, 
    > a.nav-link:hover 
    { 
     text-decoration: none; 

     border-bottom-width: $nav-pills-underline-border-width; 
     border-bottom-style: solid; 
     border-bottom-color: $nav-pills-underline-border-color; 
    } 

    // bg 
    > a.nav-link.active{ 
     background-color: $nav-pills-underline-active-bg !important; 
    } 



    // color 
    > a.nav-link.active:hover, 
    > a.nav-link:hover 
    { 
     color: $nav-pills-underline-link-hover-color; 
     background-color: $nav-pills-underline-hover-bg !important; 

    } 

    } 



} 

使用CSS類HTML：

<ul class="nav nav-pills nav-pills-underline"> 
    <li class="nav-item"> 
    <a class="nav-link active" 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> 
</ul> 

在這裏找到所有文件：https://gist.github.com/maxivak/86535e8e6d3504d62bf7d637bf46109c