类中的 CSS 未应用于导航内容

Question

我正在尝试自定义 Bootstrap Nav 选项卡中的内容。正在应用 CSS 类，但没有显示任何样式。

HTML（去掉其他标签以提高可读性）

.unpublished {
  background-color: $green !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                <span class="fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class="tab-content unpublished">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="unpublished">
                <span class="fas fa-times-circle"></span>Course space is not published
                <a href="#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>

Answer 1

看来您正在使用 sass 变量。确保所有 sass 设置都是正确的。我的意思是 main.scss 和您使用的所有部分工作正常。如果没有修复该修复并重试。

此外，引导 CSS 链接（或 CDN 链接）必须位于我们本地自定义样式表文件之前，以覆盖引导应用的默认样式。

但是，一个快速提示，每当您发现自己的样式没有被应用以及许多此类情况时，您必须检查开发人员窗口中的代码（在窗口上按 Ctrl+shift+I 并检查样式。

这是您自己学习和解决问题的最佳方式。

谢谢