html - Bootstrap 面板和伪类

Question

我有这个bootstrap and custom css生成不错的“书架上的书”。当我使用代码本身时，它就起作用了。但是当我在 div 中插入代码时:

<div class="panel panel-default">....code from the link...</div>

突然，架子消失了。我注意到当我在面板中使用伪元素(:before, :after)时，它们会以某种方式停止工作。你知道发生了什么事吗？请帮助:)

Answer 1

bootstraps 面板的背景色为白色，覆盖了您的 :before 和 :after css。

.panel {
   background-color: #fff; /*GET RID OF THIS*/
}

(您可以选择以不同的方式执行此操作:

1. 您可以更改 native Bootstrap (不推荐，如果您使用的是 cdn，则不能)。

2. 在面板上添加一个不同的类并将此代码放入:

   .newClass { 背景色:无!重要； }

(您可以使用none 或transparent)任何一个都会让您的货架CSS恢复