覆盖 Bootstrap 5 字段集样式

回到以前版本的 Bootstrap(以及 vanilla CSS),以下 HTML:

<fieldset>
  <legend>Test</legend>
    Welcome!
</fieldset>

输出一个带边框的字段集,图例越过它:

Fieldset with legend over its border

然而,当与 Bootstrap 5 一起使用相同的 HTML 时,输出如下所示:

Fieldset in Bootstrap 5

如何覆盖引导 CSS,以便字段集的边框再次可见,其图例上方?

stack overflow Override Bootstrap 5 fieldset style
原文答案
author avatar

接受的答案

任何 css 都可以使用 revert 重置为默认值:

fieldset, legend {
   all: revert;
}
.reset {
    all: revert;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<fieldset>
    <legend>Legend</legend>
</fieldset>

<fieldset class="reset">
    <legend class="reset">Reset legend</legend>
</fieldset>

答案:

作者头像

一个解决方案可能会在 CSS 中覆盖 legendfieldset ,如下所示:

fieldset {
    border: solid 1px gray;
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
}
legend {
    float: none;
    width: inherit;
}

但是我不认为这种方法是这种方法最干净的,有没有推荐的方法来实现这一点?