如何移除React-Bootstrap中row类的width属性以修复电商顶部面板问题？

问题核心 #

你遇到的是Bootstrap默认样式优先级过高的问题：.row > *的width:100%强制让子元素占满整行，导致布局异常，只有在开发者工具里移除这个属性才能恢复正常。

可行解决方案 #

1. 自定义高优先级CSS覆盖

给目标Row加专属类名，用更具体的选择器覆盖默认样式：

/* 在全局样式文件中添加 */
.brand-bar-row > * {
  width: auto !important;
}

然后修改BrandBar组件里的Row：

<Row className="d-flex brand-bar-row">

!important用来强制提升优先级，确保覆盖Bootstrap的默认样式。

2. 直接给Card设置宽度

如果只需要调整BrandBar里的Card布局，也可以直接给Card加内联样式：

<Card
  style={{cursor: 'pointer', width: 'auto'}}
  key={brand.id}
  className='p-2 align-items-center'
  onClick={() => device.setSelectedBrand(brand)} 
  border={brand.id === device.selectedBrand.id ? 'danger' : 'light'} 
>

这种方式只针对当前组件的Card，不会影响全局Row样式。

3. 全局修改Bootstrap样式（谨慎使用）

如果所有Row都不需要这个width:100%属性，可以直接在全局样式里覆盖：

.row > * {
  width: auto !important;
}

注意：这会影响项目中所有使用Row的组件，确认没有其他依赖这个样式的布局再用。

为什么之前的修改无效？ #

你写的row > *是元素选择器，而Bootstrap的默认样式是类选择器.row > *，类选择器优先级高于元素选择器，所以你的样式根本没生效。开发者工具里直接修改是操作计算后的样式，优先级最高，所以能看到效果。

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