覆蓋 Bootstrap 5 字段集樣式
[英]Override Bootstrap 5 fieldset style
問題描述
回到以前版本的 Bootstrap（還有 vanilla CSS），下面是 HTML：
<fieldset>
<legend>Test</legend>
Welcome!
</fieldset>
輸出帶邊框的字段集，圖例會覆蓋它：
然而，當相同的 HTML 與 Bootstrap 5 一起使用時，output 看起來像這樣：
我如何覆蓋 bootstrap CSS，以便字段集的邊框再次可見並帶有其圖例？
3 個解決方案
解決方案1
1 2021-12-30 21:19:34
任何 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
0 2021-12-30 21:23:54
一個解決方案可能會覆蓋fieldset中的legend和字段集，如下所示：
fieldset {
border: solid 1px gray;
padding-top: 5px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
}
legend {
float: none;
width: inherit;
}
但是我不認為這種方法是這種方法最干凈的，有沒有推薦的方法來實現這一點？
解決方案3
0 2022-12-29 17:46:52
有同樣的問題，以下方法對我的情況有所幫助。 有關詳細信息，請參閱以下內容。
https://github.com/twbs/bootstrap/issues/32548
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <fieldset class="border rounded-3 p-3"> <legend class="float-none w-auto px-3" >Test</legend> Welcome! </fieldset> </div> </body> </html>
解決方案4
-1 2021-12-30 21:15:09
一些;important; 引導 CSS 可能會有所幫助。
如何覆蓋引導樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.