覆盖Bootstrap表边框合拢样式 [英] Override Bootstrap table border-collapse style

问题描述

Bootstrap有一个表{border-collapse：collapse; border-spacing：0;} style。我想覆盖这个，所以我创建了一个类，并将其应用到问题表：

Bootstrap has a table {border-collapse: collapse; border-spacing:0;} style. I want to override this so I've create a class and applied it to the table in question:

table.FormGroupContainer
{
    border-collapse: separate;
    border-spacing: 2px;
}

但仍然 Chrome元素检查器显示Bootstrap CSS已被覆盖，但只在检查器中禁用样式允许边框间距。我在IE 11和Firefox 31.0中观察到了这一点。内联样式也显示为覆盖（如Chrome检查器中所示），但在禁用Bootstrap样式之前没有效果。

but still the borders remain collapsed. The Chrome element inspector shows the Bootstrap CSS has been overridden but only disabling the style in the inspector allows a border spacing. I have observed this in IE 11 and Firefox 31.0. Inline styles also appear to override (as shown in Chrome inspector) but have no effect until I disable the Bootstrap style.

CSS加载顺序也似乎没有什么区别。

CSS load order also seems to make no difference. What gives? Isn't the class higher specificity?

推荐答案

加载顺序在这里是一个问题。我的样式表正在之前加载 Bootstrap。我对我的样式表中的规则添加了更多的特异性，允许它与Bootstrap的 table CSS竞争。感谢@Christina。

Load order was an issue here. My stylesheet was being loaded before Bootstrap. I added greater specificity to the rule in my stylesheet that allowed it to compete with Bootstrap's table CSS. Thanks @Christina.

这篇关于覆盖Bootstrap表边框合拢样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！