【问题标题】:How to override or reset bootstrap styles with default browser's styles? [duplicate]如何使用默认浏览器的样式覆盖或重置引导样式? [复制]
【发布时间】:2017-09-06 15:14:58
【问题描述】:

------------------------------------------

更新以澄清我的问题

就像在这个小提琴https://jsfiddle.net/30x0pdzx/1/ 中一样,我想让第二个字段集显示为默认浏览器在此处呈现https://jsfiddle.net/1b0hxruq/1/

------------------------------------------

我想覆盖或重置具有类 no-bootstrap 的字段集的引导样式

<fieldset class="no-bootstrap">
    <legend></legend>
</fieldset>

目前,bootstrap 的 fieldset 样式是

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

那么我应该怎么做才能将其覆盖(或重置)为default 浏览器样式?

fieldset.no-bootstrap {
    min-width: ???;
    padding: ???;
    margin: ???;
    border: ???;
}

感谢您的考虑 :)

【问题讨论】:

  • 你知道 CSS 还是 ?您可以填写任何您想要的样式。始终确保创建一个新的 CSS 文件并将其加载到您脑海中的原始引导文件下方,否则我不明白您的问题是什么意思。
  • 澄清问题。看来你已经知道答案了,所以我不确定你在问什么。
  • 你也可以在包含 bootstrap css 之后只放那些,如下所述!对于任何不生效的重要的是要走的路
  • @ZimSystem 我刚刚编辑了我的问题,正如我在重复问题中看到的那样,它只是说明了显示属性的重置。但我的问题是重置具有引导程序样式的整个元素的所有属性!

标签: css twitter-bootstrap overriding


【解决方案1】:

如果您有这些问号,只需添加您喜欢的任何样式,然后将!important; 添加到所有样式中,或者确保您的 CSS 表在 Bootstrap 之后加载。

例如:

fieldset.no-bootstrap {
  min-width: 200px !important;
  padding: 5px !important;
  margin: 20px !important;
  border: 1px solid red !important;
}

无论你把它放在哪里都会起作用(或者至少是非常可能)。

【讨论】:

  • 感谢您的回答,但我不想使用特定值设置样式,因为我只想使用 default 浏览器的样式
  • @Vu Nguyen - 不幸的是没有办法做到这一点。除此之外,每个浏览器都会有所不同。我只能建议您以某种您认为妥协的方式对其进行样式设置,或者手动加载 Bootstrap,并删除影响字段集的部分。
【解决方案2】:

您的覆盖样式应位于您要覆盖的代码之后。因此,将引导源代码放在您的个人 CSS 之前。

也可以使用 !覆盖任何特定样式的重要标签,但不建议经常使用它。

应该是这样的:

。班级{ 红色 !重要的 }

【讨论】:

  • 感谢您的回答,但这不是我的问题。我刚刚更新它更清晰:D
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-07
  • 2020-03-31
  • 1970-01-01
  • 2014-11-11
  • 1970-01-01
  • 2019-11-21
相关资源
最近更新 更多