如何使用v-for生成横向连续排列而非纵向堆叠的div元素

嘿，我懂你的困扰——用v-for循环读取JSON生成产品卡片，结果它们总是竖着堆成一列，调了display属性也没效果对吧？咱们来拆解问题，一步步搞定它。

首先看你的DOM结构，问题出在v-for的位置和Bootstrap栅格系统的嵌套逻辑冲突了。你现在把v-for放在了一个额外的div上，这个div又包裹着Bootstrap的col-*类元素，再加上多层嵌套的row，直接打乱了栅格的布局规则，导致卡片没法并排。

解决步骤： #

• 调整v-for的位置，直接绑定到col元素上
  Bootstrap的栅格系统要求row直接包含col-*元素，每个col会自动按比例分配宽度并排显示。你需要把v-for移到col标签上，去掉外面多余的包裹div：

  原来的结构：

  <div v-for="p in products" :key="p[0]" style="display: inline-block;">
    <div class="col-xl-3 col-l-3 col-md-3 col-sm-3 col-xs-3">
      <div class="producte">...</div>
    </div>
  </div>
  

  修改后：

  <!-- 确保这个row是直接包裹所有col的父容器 -->
  <div class="row">
    <div v-for="p in products" :key="p[0]" class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
      <div class="producte">
        <!-- 产品内容：图片、名称、标签等 -->
        <img :src="p[2]" class="productes" alt="producte" />
        <p>{{ p[1] }}</p>
        <div v-if="p[4] === 'new'" class="etiqueta">
          <img src="resources/imgs/sign_new_offer.png" alt="new" />
        </div>
        <div v-if="p[4] === 'offert'" class="etiqueta-offer">
          <img src="resources/imgs/sign_offer.png" alt="offer" />
        </div>
        <!-- 模态框部分保持不变 -->
        <transition name="fade" appear>
          <div class="modal-overlay" v-if="showModal" @click="showModal = false"></div>
        </transition>
        <transition name="slide" appear>
          <div class="modal" v-if="showModal">
            <button class="close" @click="showModal = false">X</button>
            <img src="resources/imgs/detail_offer2.png" class="detailimg" alt="offer2">
            <p>HACOA MASKING TAPE HOLDER</p>
            <p class="price">22, 00€</p>
            <div class="etiqueta-purchase">
              <img src="resources/imgs/sign_new_offer_purchase.png" alt="newpurchase">
            </div>
            <input v-model="value" type="text" />
            <p class="error">{{ errorMessage }}</p>
            <button class="comprar" @click="addToCart">COMPRAR</button>
          </div>
        </transition>
      </div>
    </div>
  </div>
  

• 清理多余的嵌套row
  看你原始代码里，.llista下面又嵌套了一个row，这会导致栅格布局混乱。要确保只有最外层的row用来承载所有产品col，去掉中间不必要的row嵌套。

• 修正Bootstrap类名小错误
  注意你写的col-l-3是错误的，正确的大屏类名是col-lg-3；另外移动端的col-xs-3在Bootstrap 4+里已经改成col-3，不过为了兼容性可以调整为不同屏幕的适配（比如移动端用col-12，小屏用col-sm-6，这样在手机上不会挤成一团）。

为什么原来的display设置没用？ #

因为你给v-for的div加inline-block，但里面的col-*元素默认是块级元素，而且如果父容器不是row，col的宽度计算会失效，导致每个col还是占满一行，自然没法并排。用Bootstrap栅格的话，就不用额外加inline-block或者float，它本身已经帮你处理了布局。

如果调整后还是有问题，可以检查下.producte类的CSS，确保没有设置width: 100%以外的固定宽度，或者float属性干扰布局。

备注：内容来源于stack exchange，提问作者Samu