Question

我正在尝试将Twitter的Bootstrap导航栏（以及将来可能的其他组件）添加到现有项目中。 Bootstrap有一些CSS，它直接应用于表元素，这打破了表的默认行为。

table {
  border-spacing: 0;
  border-collapse: collapse;
}

我添加了自己的CSS，在Bootstrap的CSS之后加载并覆盖属性。

table{
  border-spacing:initial;
  /*border-spacing:0;*/
  border-collapse:initial;
  /*border-collapse:separate;*/
}

我确认我的CSS规则是使用Chrome检查器应用的规则。问题是，如果我将值设置为“initial”，“inherit”或默认值（由W3Schools Border Spacing和Border Collapse页面定义），则不会恢复为默认值行为。间距似乎完全消失，而不是看到桌子周围的“边界”。我注意到的一件事是webkit具有与“border-spacing”相关联的不同默认值。 “-webkit-border-horizontal-spacing”和“-webkit-border-vertical-spacing”似乎默认为1px，但使用这些值也没有帮助我。它让我回到边界，但表似乎失去了它的cellPadding / cellSpacing属性。

我发现禁用应用于表格元素的所有“边框间距”规则会恢复我想要的行为，但设置默认值则不会。

您可以使用以下JSFiddle页面查看问题：

Default behavior without BootStrap

After adding Bootstrap and overriding the CSS rules

预先判断这与现有问题有关或简单的简单说法......

This one是一个加载订单问题，我很确定我已经确认这不是问题，但我会对如何绝对确定的建议持开放态度。我也尝试提高CSS规则的特异性，但由于我的规则是已经应用的规则，因此无法解决任何问题。

我现在能看到的唯一解决方案是修改我的Bootstrap CSS的本地副本以删除该规则，但我希望有一个解决方案可以解释为什么默认值在它们出现后没有默认行为改变。这将阻止我不得不偏离库并在Bootstrap发布更新时重新应用修复。

覆盖Bootstrap表CSS不会将表返回到原始状态

0 个答案: