2

改良的引导药丸

是否可以使用粗下划线栏呈现引导导航药丸，与此处显示的选项卡文本设置宽度一样宽？

4

3 回答 3

4

您可以为您的导航药丸使用以下样式属性

Jsfidlle 与 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;
     }
于 2013-02-20T15:50:18.823 回答
1

为带有 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;

    }

  }



}

哈姆勒：

  %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
于 2017-10-09T19:50:31.617 回答
0

带有 CSS 解决方案的 Bootstrap 4：

.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>

于 2021-02-16T12:09:35.477 回答