Question

我试图实现一个页面的某些部分需要一些自定义样式的表格（我知道表格是一个很大的不是没有这个，但是我这样做，请尝试只看问题。）

问题是，当我包含Bootstrap时，线路会被破坏。最简单的解释方法是查看this jsfiddle然后删除引导依赖项。

我认为问题出现在以下CSS中：

td span {
  background-color: #fff;
  color: #000;
}
hr {  
  border: none;
  color: blue;
  background-color: blue;
  height: 1px;
  position: absolute;
  display: block;
  width: 100%;
  z-index: -1;
}

这个实现是借用早期question的想法。

Answer 1

Bootstrap直接在元素中为元素应用了多种样式，line 159元素的bootstrap-combined.min.css的{主要）冲突规则为hr：

hr {
    margin:20px 0;
    border:0;
    border-top:1px solid #eeeeee;
    border-bottom:1px solid #ffffff;
}

要纠正，请添加：

Demo Fiddle

hr{
    margin:10px 0;
}

给你的CSS。请注意，您可能还想更改a和table元素的样式。

要了解Bootstrap应用于每个元素的样式，请在浏览器开发人员工具中使用DOM检查器逐步进入问题及其CSS中的元素。

为什么Twitter Bootstrap会破坏我的CSS布局？

1 个答案:

Demo Fiddle