如何在 bootstrap 和 sass 中编辑标题的字体大小答案

【问题标题】：How can I edit the font size of heading in bootstrap and sass如何在 bootstrap 和 sass 中编辑标题的字体大小
【发布时间】：2022-02-05 22:42:04
【问题描述】：

如何在 bootstrap 和 sass 中编辑标题的字体大小？并尝试了此代码，但它不起作用，请帮我解决这个问题。这是我的 HTML 代码：

<span class="h1" id="minutes">00</span>
<span class="h1" id="colon">:</span>
<span class="h1" id="seconds">00</span>
<span class="h1" id="colon">.</span>
<span class="h1" id="milliseconds">00</span>

这是我的 SASS 代码

    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
    $utilities: () !default;
    $utilities: map-merge((
                
    
    "font-size": (
                  rfs: true,
                  property: font-size,
                  class: fs,
                  values: (
                    1: 7rem,
                    2: 6rem,
                    3: 5rem,
                    4: 4rem,
                    5: 3rem,
                    6: 2rem
                  ),
                ),
              ),
              $utilities
                );
                
    @import "../node_modules/bootstrap/scss/bootstrap";

【问题讨论】：

标签： html sass bootstrap-5

【解决方案1】：

注意：永远不要更改引导文件中的默认值，而是始终使用自定义 CSS/JS 文件修改值。

试试这个代码：


    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
$h1-font-size: 7rem;
$h2-font-size: 6rem;
$h3-font-size: 5rem;
$h4-font-size: 4rem;
$h5-font-size: 3rem;
$h6-font-size: 2rem;
                
    @import "../node_modules/bootstrap/scss/bootstrap";

查看引导文档，您可以更改字体大小变量

https://getbootstrap.com/docs/5.0/utilities/text/#font-size

【讨论】：