如何在Bootstrap 4中使用Sass更改字体大小？

css CSS

猪猪Stafan

2020-03-23

我正在获取交叉信息，并想在这里提出问题。我已经读过一些地方的字体大小，例如应该从html元素更改：

html { font-size: 14px }

bootstrap 4 rem值将相应地更新文本。

有趣的是，如果我将html元素的font-size保留为其默认值，并更改bootstrap变量以更改字体大小，那我在做错什么吗？

例如：

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

第2751篇《如何在Bootstrap 4中使用Sass更改字体大小？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
理查德Stafan 2020.03.23

引导定义的基础font-size，在它的_reboot.scss作为

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

注意：-请勿将默认值更改为框架文件，请始终使用自定义css / js文件修改值。

因此，为了更改字体大小以14px在您自己的字体style.css（自定义css文件）中使用此字体

body {
    font-size: 0.875rem;
 }

这是工作的小提琴

使用，!important您将看不到更改以覆盖默认更改。

在您的custom.scss文件中执行以下操作：

$custom-variable:0.875rem;

然后像这样使用它：

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size:$custom-variable;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android