Bootstrap表css不能與Vue.JS組件一起工作

Question

我使用bootstrap和Vue.js作爲webapp。但我不能在Vue組件中使用引導程序表css。當我寫

<table> 
    <tr class='active'> 
    <td>place</td> 
    <td>holder</td> 
    </tr> 
</table> 

外部Vue組件css工作正常，表格格式正確。但是，當我在Vue組件的<template>...</tenplate>標記中使用相同的代碼時，bottomstrap表css的active樣式不應用於表格行。

我將Vue組件保存在.vue文件中並使用webpack進行編譯。

怎麼回事？

Answer 1

向表中添加tbody元素解決了問題。代碼現在顯示爲

<table> 
    <tbody> 
    <tr class='active'> 
     <td>place</td> 
     <td>holder</td> 
    </tr> 
    </tbody> 
</table> 

現在CSS正常工作。

Answer 2

我可以看到表格在Vue組件中正常工作。以下是我使用的表的代碼：

<table class="table"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Email</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Mary</td> 
     <td>Moe</td> 
     <td>mary@example.com</td> 
     </tr> 
     <tr> 
     <td>July</td> 
     <td>Dooley</td> 
     <td>july@example.com</td> 
     </tr> 
    </tbody> 
    </table> 

這裏是工作fiddle。