回到 Bootstrap 的早期版本（以及 vanilla CSS），以下 HTML：
<fieldset>
<legend>Test</legend>
Welcome!
</fieldset>
輸出一個帶邊框的欄位集，圖例越過它：
然而，當相同的 HTML 與 Bootstrap 5 一起使用時，輸出如下所示：
如何覆寫 bootstrap CSS，以便欄位集的邊框再次可見，并帶有圖例？
uj5u.com熱心網友回復：
任何 css 都可以使用 revert 重置為默認值：
fieldset, legend {
all: revert;
}
.reset {
all: revert;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset>
<legend>Legend</legend>
</fieldset>
<fieldset class="reset">
<legend class="reset">Reset legend</legend>
</fieldset>uj5u.com熱心網友回復：
一個解決方案可能是重寫的，legend并且fieldset在 CSS 中是這樣的：
fieldset {
border: solid 1px gray;
padding-top: 5px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
}
legend {
float: none;
width: inherit;
}
但是我不認為這種方法是這種方法最干凈的方法，有沒有推薦的方法來實作這一點？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400160.html
標籤：html css 推特引导 bootstrap-5
上一篇：在SecurityContext中找不到身份驗證物件-Spring5
下一篇：我想在頁面加載時延遲bs模式顯示