Question

我最近在我的项目中添加了bootstrap，它运行良好，但我遇到了CSS问题。

在将bootstrap添加到我的项目之前，我添加了以下CSS类：

        .inlineItem.label {
            font-weight: bold;
            margin-right: 20px;
            width: 220px;
        }

Bootstrap有自己的.label

.label {
       display: inline;
       padding: .2em .6em .3em;
       font-size: 75%;
       font-weight: 700;
       line-height: 1;
       color: #fff;
       text-align: center;
       white-space: nowrap;
       vertical-align: baseline;
       border-radius: .25em;
      }

我认为没问题，我的类和我想要它应用的地方比bootstrap类更具体，所以它会忽略它。问题是它仍然需要引导标签类，只是添加了更具体的其他属性。

我认为这是CSS应该如何工作。

除了重命名我的类或将可能被引导标签类覆盖的属性设置为inherit之外，是否有办法告诉它不要使用Bootstrap库中的类？

Answer 1

你应该检查你是否在.css文件之前声明了引导程序：

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/yourstylefile.css" rel="stylesheet">

如果你这样做，你应该尝试从bootstrap.css中删除标签样式（很简单）或更改.css文件中的标签样式。

.label {
       display: inherit;
       padding: inherit;
       font-size: inherit;
       font-weight: inherit;
       line-height: inherit;
       color: inherit;
       text-align: inherit;
       white-space: inherit;
       vertical-align: inherit;
       border-radius: inherit;
}

在CSS和继承属性中冲突类

1 个答案: