用下划线渲染的Bootstrap药丸

Question

是否可以使用厚下划线条渲染自举导航药丸，与标签文本设置宽度一样宽，如此处所示？

Answer 1

您可以使用以下样式属性进行导航丸

Jsfidlle with navpills

  .nav-pills > .active > a,.nav-pills > .active > a:hover,
   .nav-pills > li > a:hover {
    color: #000 !important;
    background-color: transparent !important;
    text-decoration: none;
   font-weight: bold;
   border-radius:0px;
   border-bottom-width: 4px;
   border-bottom-style: solid;
   border-bottom-color: #FF6600;
         }
    .nav-pills > li > a{
    border-radius:0px;
     }

Answer 2

尝试使用SASS的Bootstrap 4解决方案。 它增加了一种新的.nav-pills-underline样式，可以应用于基本药片。

在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;

    }

  }



}

HAML：

  %ul.nav.nav-pills.nav-pills-underline
    %li.nav-item
      %a.nav-link.active{:href => "#"} Active
    %li.nav-item
      %a.nav-link{:href => "#"} Link
    %li.nav-item
      %a.nav-link{:href => "#"} Link

Answer 3

Bootstrap 4 with CSS 解决方案：

.nav-pills .nav-link {
  border-radius: 0;
}

.nav-pills .nav-link.active,
.nav-link.show>.nav-link {
  color: #121212;
  text-decoration: none;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #FAA330;
  background-color: #ffffff !important;
}

.nav-pills .nav-link:not(.active) {
  background-color: #ffffff;
  color: black;
}

<div>
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" id="pills-all-tab" data-toggle="pill" href="#pills-all" role="tab" aria-controls="pills-all" aria-selected="true">All</a>
    </li>


    <li class="nav-item">
      <a class="nav-link" id="pills-review-tab" data-toggle="pill" href="#pills-review" role="tab" aria-controls="pills-review" aria-selected="false">In review</a>
    </li>

  </ul>
  <hr style="margin-top: -16px">

</div>

<div class="tab-content" id="pills-tabContent">

  <div class="tab-pane fade show active" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab">
    All content
  </div>

  <div class="tab-pane fade" id="pills-review" role="tabpanel" aria-labelledby="pills-review-tab">
    <p>Review content</p>
  </div>

</div>