小屏按钮组换行是父容器white-space: nowrap导致的，需在直接父容器设flex-wrap: wrap或响应式类，而非给.btn-group加text-wrap。
Bootstrap按钮组小屏换行不是按钮的问题，是父容器的white-space在作怪
默认情况下，.btn-group 是 inline-flex 容器，但它的直接父元素（比如 <div> 或 <code><nav></nav>）如果设置了 white-space: nowrap（常见于导航栏、工具栏等场景），就会强制所有子项（包括按钮组）不换行——可一旦屏幕窄到放不下，浏览器只能把整个按钮组“挤”到下一行，看起来像按钮组自己断开了。
更隐蔽的情况是：某些 Bootstrap 工具栏组件（如 .navbar-nav）内部用了 white-space: nowrap 配合 flex-wrap: wrap 做响应式，但没同步处理按钮组的包裹逻辑，导致小屏时 flex 项目被压缩、溢出后触发换行，而非平滑收缩。
别乱加 text-wrap 类，它对按钮组无效
.text-wrap 只作用于内联级文本节点（如 <span></span>、<button></button> 内的文字），它等价于 white-space: normal，但不会影响 .btn-group 这类块级/弹性容器的布局行为。给按钮组本身加 .text-wrap，等于给一个 display: inline-flex 元素设 white-space —— 浏览器直接忽略。
- ✅ 正确干预点：按钮组的**直接父容器**（比如
<div class="d-flex">） <li>❌ 错误操作：给 <code>.btn-group加.text-wrap、.text-break或手动写white-space: normal - ⚠️ 注意：Bootstrap 5+ 的
.btn-group默认无固定宽度，换行本质是父容器 flex 主轴空间不足 + 未启用换行 - 给按钮组父容器加
flex-wrap: wrap（如果已是d-flex），并确保子项（按钮）有合理flex-basis（例如flex: 1 1 auto或设min-width: fit-content） - 用 Bootstrap 响应式类控制显示，例如小屏下改用
flex-column：<div class="d-flex flex-md-row flex-column">，让按钮垂直堆叠 <li>对单个按钮限制宽度+强制内联换行：<code><button class="btn btn-sm text-nowrap" style="max-width: 120px; white-space: normal;"></button>—— 这里white-space: normal是作用在按钮文字上，防止长文本撑开按钮 - 父容器
white-space: nowrap+display: block（非 flex）→ 按钮组被当整体文本流处理 - 按钮组嵌套在
<nav></nav>里，而nav有自定义white-space且未重置 - 用了
.btn-group-lg但没配合.btn-sm做响应式降级，导致小屏下按钮宽度过载
小屏按钮组不断行的三个可靠做法
核心思路是让按钮组在窄屏下能「逐个换行」或「缩放适配」，而不是整组硬挤下去：
立即学习“前端免费学习笔记（深入）”；
为什么 overflow-wrap / word-break 对按钮组换行没用
overflow-wrap: break-word 和 word-break: break-all 只控制**内容内部的断行位置**（比如按钮里的文字是否在 URL 中间断开），它们无法改变按钮组作为 flex 项目的排列方式。即使你把按钮文字全断成单字，按钮本身的 min-width 和父容器的 flex-direction 才决定它要不要换行。
真正卡住换行的，往往是以下组合：
这类问题往往要查三层：按钮 → 按钮组 → 按钮组父容器 → 父容器的父容器。最常被忽略的是那个没命名、没加类、纯靠 Bootstrap 默认样式撑起来的外层 <div>。</div>
