我正在使用 Bootstrap v5.0.2，但我需要將字體大小覆寫為某個自定義值。
在我使用的 html 中，<a href="#" >Click</a>
這給了我一些預定義的按鈕大小。在我的主要 .css 檔案中，我有：
body{font-size: 22px;}
h1{font-size: 24px;}
我想將按鈕字體大小與頁面字體大小相匹配。
覆寫按鈕字體大小的最佳方法是什么？
uj5u.com熱心網友回復：
如果您希望將自定義大小應用于所有s，則在 BS之后.btn加載的樣式表中，通過設定 CSS 變數的值和使用該變數的字體大小來覆寫正文字體大小：.btn
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
h1 {
font-size: 24px;
}
body {
--bs-body-font-size: 22px;
}
.btn {
font-size: var(--bs-body-font-size);
}
</style>
<h1>
heading
</h1>
<p>
paragraph
</p>
<button class="btn btn-primary">
button
</button>這將調整基于該var(--bs-body-font-size)值的任何元素的字體大小。不需要使用也不需要!important額外的類名（在每一個上.btn）。
uj5u.com熱心網友回復：
我會在你的主 css 檔案中添加一個類。例如
.pageButtonSize { font-size: 22px !important; }
然后將該類添加到您的按鈕標記中。
<a href="#" class="btn btn-outline-danger pageButtonSize">Click</a>
uj5u.com熱心網友回復：
您可以創建自己的 file.css 包含要覆寫的所有樣式
然后，在添加引導程式后將此檔案添加到您的專案中
注意：為確保應用您的樣式，請考慮為每種樣式添加 !important，例如：
h1{
font-size: 50px !important;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473118.html