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

您可以直接将类添加到过渡组。

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

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

将vuejs过渡组应用于Bootstrap网格

1 个答案: