html - 将 vuejs 转换组应用于 Bootstrap 网格

Question

我正在尝试将 vuejs 转换应用于 Bootstrap 网格，但它完全搞砸了网格系统，因为转换组修改了 DOM 并在row和标签之间添加了一个新col-md-6标签。例子：

<div class="row">
  <transition-group name="list">
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </transition-group>

当它被渲染时，它被修改为：

<div class="row">
  <span>
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </span>
</div>

新span标签与网格系统混淆，因为.col-md-6不再是.row.

任何人都知道仍然使用 Bootstrap 网格的解决方法吗？

Answer 1

您可以直接将一个类添加到转换组。

默认情况下 aspan由transition-group. 你用tag属性改变它，然后简单地添加class="col-md-6"这样的：

<transition-group name="list" tag="div" class="col-md-6"></transition-group>