引导面板和伪类

Question

我有这个bootstrap and custom css，它可以生成漂亮的“书架上的书”。当我使用代码本身时，它可以工作。但是当我在 div 中插入代码时：

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

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

Answer 1

引导面板的背景颜色为白色，覆盖您的 :before 和 :after css。

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

（您可以选择以不同的方式执行此操作：

1. 您可以更改本机引导程序（不推荐，如果您使用的是 cdn，则不能）。

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

   .newClass { background-color: none !important; }

（您可以使用none 或transparent）任何一个都可以恢复您的货架css