Bootstrap table css 无法使用 Vue.JS 组件

Question

我正在使用 bootstrap 和 Vue.js 作为网络应用程序。但是我不能在 Vue 组件中使用 bootstrap table css 。当我写

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

在 Vue 组件外部，css 工作正常并且 table 格式正确。但是当我在 Vue 组件的 <template>...</tenplate> 标签中使用相同的代码时，bottstrap table css 的 active 样式不会应用于 table 行。

我将 Vue 组件保存在 .vue 文件中并使用 webpack 进行编译。

怎么了？

Answer 1

我可以看到 table 在 Vue 组件中正常工作。以下是我正在使用的 table 的代码：

 <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。

Answer 2

向 table 添加 tbody 元素解决了问题。代码现在显示为

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

CSS 现在工作正常。

Bootstrap table css 无法使用 Vue.JS 组件

Bootstrap table css not working with Vue.JS component

twitter-bootstrap-3

vue-component