Bootstrap5升级后row类失效、控件占满容器最大宽度的原因是什么？

AI 小北

2026-9-27

问题根因

Bootstrap 5 对 .row 内置类的默认样式做了调整，新增了 width: 100% 的默认属性，而且你现在的自定义样式优先级低于Bootstrap的全局默认样式，才会出现你写的flex布局不生效、自定义的width属性被覆盖的情况。

解决方法

方案一：直接提高自定义样式的优先级，在你自定义的row样式里加width: auto !important强制覆盖默认样式：

#checkout {
    .row {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        margin-right: 0;
        margin-left: 0;
        font-size: 12px;
        width: auto !important;
    }
}

方案二：从根源避免类名冲突，把你的行元素类名换成不和Bootstrap内置类重复的自定义名称，比如改成row-line，同步修改scss中的对应类名即可：

// 组件内修改className
<div className="row-line">
  <label>Subtotal</label>
  <label>{formatter.format(carttotal)}</label>
</div>

#checkout {
    .row-line {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        margin-right: 0;
        margin-left: 0;
        font-size: 12px;
    }
}