Question

我使用bootstrap和Vue.js作为webapp。但我不能在Vue组件中使用bootstrap table css。我写的时候

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

在Vue组件之外，css工作正常，表格格式正确。但是当我在Vue组件的<template>...</tenplate>标签中使用相同的代码时，底部表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。

Bootstrap表css不使用Vue.JS组件

2 个答案: