Question

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

HTML（删除其他标签以提高可读性）

barplot(table(x$V2))

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

Answer 1

我不确定您在哪里获得$gray-medium的颜色，但是将其更改为灰色将使背景颜色起作用。也许您的样式优先级已关闭，并且a标记的样式覆盖了它们。为a标签创建样式将成功为HTML中的链接设置样式。

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

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

如果要为第一个div设置样式，则应使用此样式。

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

Answer 3

似乎您正在使用sass变量。确保所有sass设置正确。就是说，我的意思是main.scss和您正在使用的所有部分都正常工作。如果没有解决该问题，然后重试。

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

不过，有个快速提示，每当您发现自己处于未应用样式的情况下，并且必须进行许多此类事情时，都必须在“开发人员窗口”中检查代码（在Windows上为Ctrl + shift + I，然后检查样式。 >

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

谢谢

Answer 4

html

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

css

 .unpublished {
      background-color: grey;
      color: red;
    }

来自类的CSS不适用于导航内容

4 个答案: