将 vuejs transition-group 应用于 Bootstrap 网格

Question

我正在尝试将 vuejs 转换应用于 Bootstrap 网格，但它完全搞砸了网格系统，因为转换组修改了 DOM 并在 [=13= 之间添加了一个新标签] 和 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

您可以直接添加一个class到过渡组。

默认情况下 span 由 transition-group 渲染。您可以使用 tag 属性对其进行更改，然后只需像这样添加 class="col-md-6"：

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

将 vuejs transition-group 应用于 Bootstrap 网格

Apply vuejs transition-group to Bootstrap grid

html

css

bootstrap-4

vuejs-transition