时间戳

首页 > 解决方案 > 无法在引导程序 scss 中跟踪规则

css - 无法在引导程序 scss 中跟踪规则

问题描述

我正在调查一些我对 bootstrap 4 不了解的事情。我有以下代码段：

<ul class="nav nav-pills flex-column" id="pills" data-tabsetid="2812">
    <li class="active">
        <a href="#tab-2812-1" data-toggle="tab" data-value="Load">Load</a>
    </li>
    <li>
        <a href="#tab-2812-2" data-toggle="tab" data-value="Remove">Remove</a>
    </li>
</ul>

链接看起来像药丸并垂直排列，这就是我想要的。我不明白的是，根据我的浏览器检查，定义链接样式的规则如下

.nav-pills .nav-link, .nav-pills .nav-tabs > li > a, .nav-pills > li > a, .nav-pills 
ul.nav.navbar-nav > li > a {
    border-radius: 0.25rem;
}

具体来说，它匹配.nav-pills > li > a，但我在引导源代码中找不到该规则的任何痕迹，即使考虑到 scss 处理：

//
// Pills
//

.nav-pills {
  .nav-link {
    @include border-radius($nav-pills-border-radius);
  }

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

这让我感到惊讶，因为我预计它会失败，因为我错过了 nav-link 规范，但它仍然有效。这怎么可能？scss中定义的匹配规则在哪里？

我正在使用引导程序 4.6.3

标签： cssbootstrap-4sass

解决方案

您是否加载了多个版本的 Bootstrap？您看到的规则看起来像是来自Bootstrap v3：

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}

推荐阅读