如何在手机屏幕上使用Bootstrap "Display-3“

Question

我喜欢在桌面上使用"display-3“的方式。看起来很棒。但在手机上，一些单词会被切断。如何在手机上实现"display-4-sm“或类似的功能？我不确定语法或解决方案是什么。

<h1 class="d-sm-display-3   animation" data-animation="fadeInUp" data-animation-delay="1.1s">Blockchain at Virginia Tech</h1>

​

​

Answer 1

我检查了您网站的源代码，您使用的不是Bootstrap 5，而是版本4。在bootstrap 5中，默认情况下会启用响应式字体。

要在Bootstrap 4中启用响应式字体，您可以在自定义SCSS主题文件中执行以下操作：

$enable-responsive-font-sizes: true !default;

您还可以在CSS中编写自定义类，以更改较小屏幕尺寸上的字体大小。例如：

@media only screen and (max-width: 767px) {
  .display-3 {
    font-size: 2.5rem;
  }
}

据我所知，对于标题和显示标题，没有 sm、md或lg类。

如果你想只使用Bootstrap类，你可以创建2个div，在其中你可以使用d-md-block和d-sm-block，例如：

<h1 class="display-3 d-md-block d-none">Hello World!</h1>
<h1 class="display-5 d-sm-block d-md-none">Hello World!</h1>

然而，我不推荐这种方法，我会选择前两种解决方案中的任何一种。