为什么我的 bootstrap-vue b-table 列 headers 不在部署中心？

Question

我有一个 b-table 居中列 headers。 headers 当我运行在本地位于 http://localhost... 时居中，但不在部署中。为什么会这样？

我尝试了两种使 headers 居中的方法。我已经像这样将 text-center 道具添加到 b-table 组件中...

    <b-table
        striped
        hover
        show-empty
        sort-icon-left
        :items="items"
        :fields="fields"
        class="text-center"
      >
    </b-table>

我已将此样式规则包含在我的自定义 scss 文件中，我将其导入应用程序 App.vue

table{ text-align：居中； } 这两种方法在本地都工作得很好，但是当我部署列时 headers 是正确对齐的。

这是浏览器检查工具中我的元素选项卡的截图。

并且样式选项卡清楚地表明标签选择器中的 text-align: right 规则会覆盖标签选择器中的 text-align:center 规则。

Answer 1

text-align 是一个 inherited property.

这意味着，在为元素解析此属性时，浏览器会首先查找针对该元素的任何规则。有问题的元素是 <th>.
如果浏览器发现任何此类规则，它会应用具有最高选择器特异性的规则或具有相同特异性的规则中的最后一个。

如果不存在这样的规则，那么它将从最近的具有 text-align 指定值的父级继承值。
如果没有祖先具有 text-align 值，则默认为 start，这意味着 left 对于具有 direction="ltr" 和 right[ 的文档=60=] 对于 direction="rtl".

的文档
所以，基本上，CSS 被 Bootstrap 应用于一位祖先：

.text-center { text-align: center !important; }

...被应用于实际元素的以下规则覆盖：

th { text-align: right }

不管父规则的特殊性（因为它不直接针对元素）。

要覆盖 th 规则，您可以使用：

table.text-center * { text-align: center }

...因为table.text-center *比th和具有更高的特异性，它们都针对元素 (<th>).

显然，如果您只想将居中应用到 <th> 个元素，则应将上述选择器中的 * 替换为 th。

回答你为什么它在本地而不是在远程上工作的问题：你的遥控器有额外的 CSS（在 app.ee70fc50.css 中），它解析 text-align 值 <th> 元素，因此父值被忽略（而在本地父值是继承的，因为您没有将 CSS 应用于 <th>s）。

为什么我的 bootstrap-vue b-table 列 headers 不在部署中心？

Why do my bootstrap-vue b-table column headers not center in deployment?

vue.js

bootstrap-vue

text-alignment

text-align