覆盖 Bootstrap 5 字段集样式

【问题标题】：Override Bootstrap 5 fieldset style覆盖 Bootstrap 5 字段集样式
【发布时间】：2021-12-31 05:26:58
【问题描述】：

回到以前版本的 Bootstrap（以及原生 CSS），以下 HTML：

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

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

尽管如此，当与 Bootstrap 5 一起使用相同的 HTML 时，输出如下所示：

如何覆盖引导 CSS，使字段集的边框再次可见，并在其上显示图例？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

任何 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>

【讨论】：

感谢您的洞察！它有效，而且看起来也是一个干净的解决方案

【解决方案2】：

解决方案可能会在 CSS 中覆盖 legend 和 fieldset，如下所示：

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

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

【讨论】：