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

Question

我正在使用Bootstrap 4构建一个响应式Web应用程序.我希望移动设备上的所有文本的字体大小与桌面相比减少,因此我根据Bootstrap文档(https://)将以下内容添加到我的基本css文件中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;
  }
}

但是字体大小仍然是固定的.我究竟做错了什么？

Answer 1

我认为最简单的方法是使用@media Queries.假设您想要响应具有类"class-name"的内容或甚至整个html标记更改字体大小,只需将您的媒体查询添加到css文件的末尾或其中的任何位置.

示例代码:

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
    .class-name {font-size: 16px;}
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {  
    .class-name {font-size: 30px;}
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    .class-name {font-size: 40px;}

  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {  
    .class-name {font-size: 48px;}
  }

  /*

更多信息可以在这里找到

Answer 2

从Bootstrap 4.3.1开始，现在有了RFS（响应字体大小）！但是，如docs中所述，您必须使用$enable-responsive-font-sizesSASS变量启用它。

RFS演示：https : //www.codeply.com/go/jr8RbeNf2M

在 Bootstrap 4.3.1 之前，您可以使用SASS实现响应文本。但是，您需要为要调整大小的文本指定所需的适当选择器。

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

html {
  font-size: 1rem;
}

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

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

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

@import "bootstrap"; 

演示：https：//www.codeply.com/go/5pZDWAvenE

也可以仅使用CSS（不使用SASS）完成此操作：

演示：https：//www.codeply.com/go/E1MVXqp21D

Answer 3

这是 Sass 的一项功能。

要访问媒体断点混合和大小变量，您需要：

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

https://getbootstrap.com/docs/4.0/getting-started/theming/