Vue 3中使用Bootstrap display类的标题为何无响应式效果？

问题核心是Bootstrap默认的.display-*类本身不带响应式断点，无论屏幕尺寸如何，样式都是固定值，因此无法实现标题随页面大小变化的效果。以下是两种可行的解决办法：

方法一：使用Bootstrap响应式Display类（推荐） #

Bootstrap 5及以上版本提供了带断点的响应式Display类，格式为{断点前缀}-display-{数字}，常用断点包括：

• sm（≥576px）
• md（≥768px）
• lg（≥992px）
• xl（≥1200px）

直接在元素上叠加不同断点的类即可实现响应式切换：

<h1 class="header-title display-4 sm-display-3 md-display-2 lg-display-1">Title</h1>

这样设置后：

• 移动端（<576px）使用display-4样式
• 小屏（≥576px）切换为display-3样式
• 中屏（≥768px）切换为display-2样式
• 大屏（≥992px）切换为display-1样式

方法二：自定义媒体查询样式 #

如果需要更灵活的尺寸控制，可以通过CSS媒体查询，基于Bootstrap的断点尺寸自定义标题样式：

.header-title {
    font-family: Poppins, sans-serif;
    color: #555555;
    /* 移动端默认样式 */
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

/* 小屏断点适配 */
@media (min-width: 576px) {
    .header-title {
        font-size: 4rem;
    }
}

/* 中屏断点适配 */
@media (min-width: 768px) {
    .header-title {
        font-size: 5rem;
    }
}

/* 大屏断点适配 */
@media (min-width: 992px) {
    .header-title {
        font-size: 6rem;
    }
}

同时需确保Vue项目已正确引入Bootstrap CSS文件，例如在main.js中添加：

import 'bootstrap/dist/css/bootstrap.css'

内容的提问来源于stack exchange，提问作者Trinky