html - CSS - 与 Bootstrap 结合时未注册的类

Question

我有一个奇怪的问题，我似乎无法弄清楚。我是 CSS 的新手，决定使用 bootstrap 来辅助样式等。

我遇到的问题是当我尝试将两个类分配给一个 div 元素时，一个是 Bootstrap 列，另一个来 self 自己的样式表。

在某些情况下，我的样式表中的代码似乎被忽略了。现在我已经取出了一点代码和 css 并将其放入 jsfiddle 但它工作正常。它只有在与 html 的其余部分结合使用时才会出现问题。另请注意，如果我使用内联样式，它会起作用...

我现在将整个代码复制到 js fiddle，以便你们可以重现该问题。我遇到问题的部分是并排的 4 张图片

class="services-boxes"

无论如何，我将不胜感激任何帮助，以及一般反馈，因为我是这一切的新手! :)

https://jsfiddle.net/d9bv0grx/1/

Answer 1

由于级联样式表的工作方式(样式按顺序应用并按特异性)。您期望看到的样式很可能被特殊性覆盖了。

给this Bootstrap 阅读。

一个例子是 <div id="selector">

#selector {background-color:red;}
div {background-color:green;}

您可以期望看到一个红色背景的 div，即使之后设置了绿色背景，id 选择器具有更高的特异性。

然后尝试在您的 css 中更改选择器的特殊性，以便它们在 Bootstrap 中优先。

还要补充一点，你有大小写问题 - 你在 css 中用小写字母声明类，在你的 html 中大写。

您的 css 中也存在语法问题。您的 CSS 应如下所示:

.services-boxes {
padding:0;
max-height:500px;
width:100%;
}

对所有这些进行排序，您应该是金色的! jsfiddle