如何使用Bootstrap 4实现响应式排版?

问题描述

我正在使用Bootstrap 4构建一个响应式Web应用程序.我希望与台式机相比，减少移动设备上所有文本的字体大小，因此我根据Bootstrap文档将以下内容添加到了基本CSS文件中( a href ="https://getbootstrap.com/docs/4.0/content/typography/" rel ="noreferrer"> https://getbootstrap.com/docs/4.0/content/typography/):

I'm building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my base css file as per the Bootstrap documentation (https://getbootstrap.com/docs/4.0/content/typography/):

 html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

但是，字体大小保持不变.我在做什么错了?

However the font size remains fixed. What am I doing wrong?

推荐答案

这是Sass功能.

要访问媒体断点mixins和size变量，您需要:

To have access to the media-breakpoint mixins and the size variables, you need to:

1. 添加custom.scss文件
2. @import "node_modules/bootstrap/scss/bootstrap";
3. 并设置一个Sass编译器

1. add a custom.scss file
2. @import "node_modules/bootstrap/scss/bootstrap";
3. and setup a Sass compiler

https://getbootstrap.com/docs/4.0/getting-started/主题/

这篇关于如何使用Bootstrap 4实现响应式排版?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！