Bootstrap的.btn-group默认为inline-flex，内容包裹不占满父容器；需用w-100+d-flex+flex-fill组合实现等宽自适应，下拉按钮应设flex-grow-0避免压缩。
Bootstrap 按钮组默认不会自适应父容器宽度，必须手动干预 CSS 或借助辅助类才能撑满；直接加 class="w-100" 仅对单个按钮有效，对 .btn-group 容器无效。
为什么 .btn-group 不会自动占满父容器？
Bootstrap 的 .btn-group 是 inline-flex 容器，默认行为是“内容包裹”（shrink-to-fit），它只按内部按钮总宽度 + 间距分配空间，不响应父级 width。即使父容器设了 width: 100%，.btn-group 仍保持最小必要宽度。
常见错误现象：<div class="col-12"><div class="btn-group">...</div></div> 看起来没占满，其实是 .btn-group 自身没拉伸。
- 不要依赖栅格列（如
.col-12）自动撑开按钮组 —— 列只约束自身，不强制子元素 stretch - 不要给
.btn-group直接加style="width: 100%"—— flex 子项默认不换行，可能导致按钮溢出或文字截断 - Bootstrap 5+ 中
.w-100对.btn-group本身无效，因为它的 display 是inline-flex，不是block
用 btn-group w-100 + flex-wrap 实现响应式等宽按钮
真正起效的方式是把 .btn-group 改为 block 级 flex 容器，并让子按钮均分空间。需要组合使用：
- 加
class="btn-group w-100 d-flex"强制块级 + flex - 给每个
<button></button>加class="flex-fill"（Bootstrap 5）或class="flex-grow-1"（兼容旧版） - 若按钮数量动态，建议同时加
flex-wrap防止小屏溢出：<div class="btn-group w-100 d-flex flex-wrap"> <p>示例：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><div class="btn-group w-100 d-flex flex-wrap"> <button class="btn btn-primary flex-fill">保存</button> <button class="btn btn-outline-secondary flex-fill">取消</button> <button class="btn btn-light flex-fill">重置</button> </div></pre> <h3>下拉按钮混排时的宽度处理</h3> <p>当按钮组里含 <code>.dropdown-toggle（如下拉触发按钮），flex-fill会导致下拉箭头被压缩、图标错位或点击区域变小 —— 因为下拉按钮通常需保留固定右侧 padding 和 caret 空间。- 避免对下拉按钮应用
flex-fill；改用flex-grow-0锁定宽度 - 其余普通按钮仍用
flex-fill，让它们自动分剩余空间 - 若需整体等宽，可统一用
flex-basis: calc(100% / N - gap)（N 为按钮数），但需手写 CSS，不推荐用于动态数量场景
典型结构：
<div class="btn-group w-100 d-flex"> <button class="btn btn-primary flex-fill">提交</button> <button class="btn btn-secondary flex-grow-0 dropdown-toggle" data-bs-toggle="dropdown">更多</button> <ul class="dropdown-menu">...</ul> </div>
IE11 或 Bootstrap 4 用户的兼容写法
Bootstrap 4 没有
flex-fill，且 IE11 对flex: 1支持不稳定。稳妥做法是：- 用
class="btn-group w-100"+ 自定义 CSS：
.btn-group.w-100 .btn { flex: 1 1 auto; max-width: none; }- 避免在 IE11 中使用
flex-wrap，改用媒体查询在小屏上切为垂直堆叠：@media (max-width: 576px) { .btn-group { flex-direction: column; } } - 不要依赖
data-width="auto"（那是bootstrap-select的配置，和原生.btn-group无关）
最易被忽略的一点：按钮组内若有
<a></a>标签而非<button></button>，必须显式加class="btn"，否则flex-fill可能不生效 —— Bootstrap 的 flex 样式只作用于带.btn类的元素。 - 避免对下拉按钮应用
