覆盖引导5字段集样式

Question

返回到以前版本的Bootstrap (也使用了普通CSS)，下面的HTML：

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

输出带边框的字段集，图例在其上进行：

​

​

然而，当在Bootstrap 5旁边使用相同的HTML时，输出如下所示：

​

​

如何覆盖CSS引导程序，使字段集的边框与其上的图例再次可见？

Answer 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>

​

Answer 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;
}

然而，我不认为这种方法是最干净的，有什么推荐的方法来实现这一点吗？