Question

我希望Bootstrap 4标签（或药片）呈现下划线。

像这样：

默认Bootstrap 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;

    }

  }



}

在HTML中使用css类：

<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

Answer 2

用于多标签的css

woocommerce_package_rates

html标签

JsonPath.read(json.toString(), "object1.object2.object3.object4")

标签脚本

  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    .tab button:hover {
      background-color: #ddd;
    }


    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }

Bootstrap 4标签（药片）带下划线

2 个答案: