如何让页面中循环渲染的所有卡片保持在同一行显示

问题效果 #

原有代码 #

HTML结构 #

<div class="row text-center justify-content-center scroll" v-bind:style= "[this.language=='en' ? { 'font-family': 'Poppins'} : {'font-family':'Cairo'}]" >
 <div class="m-3 cat-class" v-for="category in categories" >
 <router-link :to="categoryLink + category.name" :key="category.id"> 
   <div class="img-container">
     <img class="img-dimensions" v-if="category.icon" :src="category.icon.images"/>
    </div>
    <div class="text-center text-wrap mt-1" style="color: black">
     {{ $t(category.name).toUpperCase() }}
     </div>
  </router-link>
</div>

CSS样式 #

.scroll {
  overflow-y: auto;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.cat-class {
  display: inline-block;
  width: 64px;
  height: auto;
  text-decoration: none;
}

.img-dimensions {
  width: 100%;
  height: 100%;
}

.img-container {
  width: 64px;
  height: 64px;
}

问题根因 #

父容器带Bootstrap内置的row类，该类默认设置display: flex、flex-wrap: wrap，优先级高于自定义的.scroll样式，直接覆盖了原有布局规则，子卡片超出容器宽度时会自动折行。另外原有样式里写的overflow-y: auto是垂直滚动，横向溢出的内容无法通过滚动查看，滚动方向配置错误。

可行修复方案 #

方案1：适配Flex布局（推荐） #

直接覆盖Bootstrap row的默认折行规则，调整滚动方向：

1. 修改.scroll样式

.scroll {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; /* 禁止flex子项折行 */
  overflow-x: auto; /* 开启横向滚动 */
  overflow-y: hidden;
  justify-content: flex-start !important; /* 覆盖原有居中类，避免滚动起始位置偏移 */
}

2. 给.cat-class添加防收缩规则，避免卡片被挤压变形

.cat-class {
  flex: 0 0 auto; /* 固定尺寸不收缩 */
  width: 64px;
  height: auto;
  text-decoration: none;
  margin: 0 12px; /* 替换原m-3类的边距，避免布局计算异常 */
}

方案2：保留inline-block布局 #

强制覆盖row类的flex布局规则：

.scroll {
  width: 100%;
  display: block !important; /* 覆盖row的flex属性 */
  white-space: nowrap;
  overflow-x: auto; /* 开启横向滚动 */
  overflow-y: hidden;
}

额外优化点 #

• v-for绑定的:key属性需要放在v-for所在的DOM元素（即带cat-class的div）上，不要放在内部的router-link上，否则Vue会抛出key位置异常警告。
• 如果不需要横向滚动、要求所有卡片自适应宽度铺满同一行，去掉overflow-x: auto配置，将.cat-class的固定宽度改为自适应即可。

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