html - 你如何通过覆盖它从 Bootstrap 中完全删除样式

标签 html css twitter-bootstrap dom overriding

所以我完全熟悉如何使用我自己的 Style.css 在 bootstrap 中覆盖样式。但是假设 bootstrap 有一个放在表格上的样式或者是标准 html 元素的东西。让我们使用标签,因为它是一个相当短的例子。我们首先假设除了以下 css 代码外,其他任何地方都没有其他标签样式或标签元素样式:

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

现在,如果我想在我的 Style.css 文件中覆盖此样式并更改边距和粗细,我可以这样做:

label {
  margin-bottom: 3px;
  font-weight: normal;
}

很简单,这将更改这两个元素并允许其他样式级联。但是,如果我想完全删除 Bootstrap 为元素标签添加的任何样式怎么办。有没有一种简单易行的方法可以做到这一点而不必做类似的事情:

label {
  display: inline;
  max-width: None;
  color: none;
  margin-bottom: 0;
  font-weight: normal;
}

或者基本上逐行检查并将每个样式属性更改为 none 或 normal 之类的东西?同时保持原始 Bootstrap 文件处于未修改状态,并且不对其中的任何内容进行注释。

顺便说一句,如果 JavaScript 既简洁又简单,我也可以使用它吗?

最佳答案

这取决于您要支持的浏览器。你可以使用

label {
  all: initial; // or all: unset
}

但请注意,它还没有得到真正广泛的支持。它适用于 IE 11、Firefox、Opera 和 Chrome,但不适用于 Safari 或大多数移动浏览器。尽管如此,了解它是否以及何时得到更广泛支持还是一个很好的选择:)

关于html - 你如何通过覆盖它从 Bootstrap 中完全删除样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30268754/

相关文章:

php - 递归下拉菜单未在 Bootstrap Codeigniter 上正确显示

html - 将鼠标悬停在内容上方时无法阻止图像掉落到内容下方

html - Bootstrap Navbar 以非常奇怪的形式显示

Canvas 元素上的 HTML 文本字段

javascript - 如何将 Bootstrap 列高度与纯 jQuery 相匹配?

css - Bootstrap 3 和 Rails 4 输入字段下的边距

html - 无法更改 Bootstrap-select selectpicker 的标题

ASP.NET - 如何检查浏览器是否支持 html5?

javascript - 如何在 Angular 6 中添加计数器?

php - 从一个表创建下拉列表并将所选值输入到另一个表(相同的 MySQL 数据库)