按钮组换行的根源在于父容器的 white-space: nowrap 或 flex-wrap: nowrap，而非 .btn-group 自身缺失 flex-nowrap；应检查并修改父容器的 flex-wrap、white-space 和 min-width。
按钮组换行不是因为没加 flex-nowrap，而是父容器默认没设它
Bootstrap 的 .btn-group 本身是 display: inline-flex，但它的 flex-wrap 默认值是 nowrap —— 所以问题从来不在按钮组自己“丢了” flex-nowrap，而在于它的**直接父容器**（比如 <div class="d-flex"> 或 <nav>）可能被其他样式覆盖了，比如意外继承了 white-space: nowrap，又没配 flex-wrap: wrap，结果整个按钮组被当做一个不可拆分的 flex 项目，在窄屏下被整体挤到下一行。
常见错误现象：
- 小屏下三个按钮突然变成「一整行在上、一整行在下」，中间留大片空白
- 按钮组右侧被截断，滚动才能看到，但开发者工具里看不出溢出
- 加了
text-wrap或word-break完全没反应
真正该检查的是：父容器的 computed flex-wrap 是不是 nowrap？white-space 是不是 nowrap？有没有 min-width 锁死了最小宽度？
给 .btn-group 加 flex-nowrap 类根本没用
flex-nowrap 是 Bootstrap 的响应式 flex 工具类，但它只对 display: flex 或 display: inline-flex 元素生效。而 .btn-group 已经是 inline-flex，它本身不响应 flex-nowrap 类 —— 因为这个类内部写的是 flex-wrap: nowrap，但 .btn-group 的样式优先级更高，或者更关键的是：它压根没被当作 flex 容器来处理（比如父层用了 d-flex，但没传下去）。
立即学习“前端免费学习笔记（深入）”；
所以你写：
<div class="btn-group flex-nowrap"> <button class="btn btn-primary">A</button> <button class="btn btn-secondary">B</button> </div>
这行不通。真正起作用的，是让它的**父容器**显式声明 flex-wrap: wrap，或者用响应式类如 flex-wrap flex-md-nowrap。
可选做法：
- 父容器加
class="d-flex flex-wrap"，再给每个<button>加flex-shrink-0防压缩 - 改用
<div class="btn-toolbar">包裹，它原生支持flex-column flex-md-row - 放弃
.btn-group，直接用<div class="d-flex gap-2">+ 单个.btn，控制粒度更高
white-space: nowrap 是隐藏推手，不是按钮组的问题
很多情况下，按钮组换行的根源是父容器（比如导航栏里的 <div class="navbar-nav">）自带 white-space: nowrap，目的是防止菜单文字断行。但它会强制所有子元素（包括 .btn-group）不换行 —— 而一旦屏幕太窄，浏览器只能把整个按钮组“打包”挪到下一行，看起来就像按钮组自己断开了。
别在 .btn-group 上试这些：
-
class="text-nowrap"→ 对容器无效，浏览器忽略 -
style="white-space: normal"→ 改的是按钮组内文字，不是布局行为 -
class="text-wrap"→ 只影响内联文本节点，对inline-flex容器无感
正确操作是定位到那个带 white-space: nowrap 的父层，要么删掉它，要么加 flex-wrap: wrap 覆盖布局逻辑。
小屏堆叠比「不断行」更实用，别硬撑横排
与其花时间调试为什么按钮组不换行，不如接受一个事实：.btn-group 本就不是为小屏横排设计的。Bootstrap 官方推荐方案是用响应式方向切换：
-
<div class="d-flex flex-column flex-md-row gap-2">：手机竖排、中屏及以上横排 - 每个按钮加
class="w-100 w-md-auto"，避免小屏按钮过宽 - 用
gap-sm-1控制小屏间距，避免堆得太密
注意一个容易被忽略的点：如果按钮里有图标（比如 <i class="bi bi-download"></i>），确保图标容器没设 white-space: nowrap，否则整行文字会被锁死，连 flex-wrap 都救不了。
