Bootstrap移动端页面标题覆盖面包屑：如何强制标题换行？

你当前的布局问题出在标题元素不在flex容器内，导致小屏无法自动换行。只需调整HTML结构并利用Bootstrap的响应式flex类即可修复：

修改后的完整代码：

<div class="card">
    <div class="card-body d-lg-flex align-items-center">
        <nav class="mb-3 mb-lg-0">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="Default.aspx">首页</a>
                </li>
                <li class="breadcrumb-item active">当前页面</li>
            </ol>
        </nav>
        <!-- 将标题容器移到flex容器内 -->
        <div class="flex-grow-1 ms-lg-3">
            <asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="标题文本"></asp:Label>
        </div>
    </div>
</div>

核心调整点：

• 结构修正：把标题所在div移入card-body的flex容器内，确保两者属于同一flex上下文。
• 响应式布局控制：
  • d-lg-flex：仅在大屏（≥992px）启用flex布局，小屏默认使用块级布局，自动换行。
  • mb-3 mb-lg-0：小屏下面包屑保留底部间距，大屏移除间距。
  • flex-grow-1：大屏下标题容器占剩余空间，避免与面包屑挤在一起；ms-lg-3给大屏下的标题添加左侧间距，提升视觉效果。
• 移除原代码中多余的align-self-end align-self-md-center center-y类，改用flex容器的align-items-center统一控制垂直居中（仅在大屏生效）。

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