Bootstrap 5移动端H4标题无法占满空间及换行问题求助

问题说明 #

网页桌面端显示正常，但移动端视图中，包含H4标题的div无法占据剩余空间，导致标题换行，需在Bootstrap 5.0.2环境下实现移动端H4标题保持单行显示。

解决方案 #

通过调整Flex布局和文本样式实现需求：

1. 让H4父容器占据剩余空间：给包裹H4的<div>添加Bootstrap内置的flex-grow-1类，确保它在Flex容器中填满剩余宽度。
2. 强制文本单行显示：给.mobile-text类添加CSS样式，禁止文本换行，超出容器的内容可选择用省略号替代。

修改后的代码 #

HTML关键部分

<div class="col d-flex align-items-center column-custom">
    <img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px;" src="/img/mobile_friendly.png" alt="">
    <!-- 添加flex-grow-1类让容器占满剩余空间 -->
    <div class="flex-grow-1">
        <h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone d-lg-none mobile-icon" viewBox="0 0 16 16"><path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" /><path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" /></svg>MOBILE-FRIENDLY</h4>
        <p class="d-none d-md-block">A responsive design makes your website accessible to all users, regardless of their device.</p>
    </div>
</div>
<div class="col d-flex align-items-center column-custom">
    <img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px;" src="/img/content management.png" alt="">
    <!-- 添加flex-grow-1类让容器占满剩余空间 -->
    <div class="flex-grow-1">
        <h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-kanban-fill mobile-icon" viewBox="0 0 16 16"><path d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z" /></svg>CONTENT MANAGEMENT</h4>
        <p class="d-none d-md-block">Custom WordPress theme and plugin development. Easily update content without knowing how to code.</p>
    </div>
</div>

CSS关键部分

@media (max-width:768px) {
    .mobile-text {
        font-weight: 600 !important;
        font-size: medium;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        /* 添加以下样式强制单行 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 可选：超出部分显示省略号 */
    }
    .mobile-icon {
        margin-right: 10px;
        color: #018673;
    }
    .footer-mobile-text {
        display: flex !important;
        justify-content: center;
    }
    .mobile-footer-padding {
    }
}

原理说明 #

• flex-grow-1：Bootstrap Flex布局类，让元素在父Flex容器中占据所有可用剩余空间，为H4提供足够显示宽度。
• white-space: nowrap：禁止文本自动换行，强制保持单行状态。
• overflow: hidden：隐藏超出容器范围的文本内容。
• text-overflow: ellipsis：将超出容器的文本替换为省略号（若不需要省略效果，可仅保留前两个属性）。

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