Bootstrap 5 列文本重叠问题求助

问题背景 #

使用Bootstrap 5搭建的网页中，row容器内的两列在屏幕尺寸介于md和sm断点之间时，列内的display-1标题文本会出现重叠现象：全屏状态显示正常，缩小屏幕时文本先挤压重叠，直到触发col-sm-12的堆叠布局后才恢复正常。相关代码如下：

<div class="row">
    <div class="col-sm-12 col-lg-4 col-md-5">
        <h1 class="display-1">Welcome to this site</h1>
    </div>
    <div class="col-sm-12 col-lg-8 col-md-7">
        <h1 class="display-1">Welcome to this site</h1>
    </div>
</div>

问题截图：

解决方法 #

1. 用响应式标题类适配不同屏幕 #

Bootstrap的display标题支持响应式后缀，可针对不同断点切换字号，适配对应列宽：

<h1 class="display-1 display-md-2 display-sm-3">Welcome to this site</h1>

大屏幕用display-1，中等屏（md）用display-2，小屏（sm）用display-3，避免文本挤压重叠。

2. 强制文本换行 #

给标题添加text-wrap类，让长文本自动换行：

<h1 class="display-1 text-wrap">Welcome to this site</h1>

若默认换行不生效，可添加自定义CSS强制断词：

.display-1 {
    word-break: break-word;
    overflow-wrap: anywhere;
}

3. 提前触发堆叠布局 #

将col-sm-12改为col-md-12，让中等屏幕直接堆叠两列，从根源避免列宽不足：

<div class="row">
    <div class="col-md-12 col-lg-4">
        <h1 class="display-1">Welcome to this site</h1>
    </div>
    <div class="col-md-12 col-lg-8">
        <h1 class="display-1">Welcome to this site</h1>
    </div>
</div>

4. 自定义媒体查询精细控制字号 #

针对sm到md的屏幕区间，编写媒体查询调整display-1的字号：

/* 适配576px到991px之间的屏幕 */
@media (min-width: 576px) and (max-width: 991px) {
    .display-1 {
        font-size: 3rem;
        line-height: 1.2;
    }
}

可根据实际显示效果调整字号数值，确保文本在列内完全显示。

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