如何对齐 bootstrap-vue 表中的列？答案

【问题标题】：How align columns in bootstrap-vue table?如何对齐 bootstrap-vue 表中的列？
【发布时间】：2020-05-03 06:10:11
【问题描述】：

在 vue/cli / "bootstrap-vue": "^2.1.0" 中使用 https://bootstrap-vue.js.org/docs/components/table 我没有找到如何为所有列设置对齐并将其更改为任何列。我试过：

<b-card-body>
        <b-table responsive="sm" striped hover small :items="users" :fields="usersFields" align-v="end">
            <template v-slot:cell(id)="data">
                <div class="-align-right">{{ data.value }}</div>
            </template>

            <template v-slot:cell(status)="data"  >
                <div class="-align-left">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
            </template>

但由于所有列都居中而失败。

如何正确？

【问题讨论】：

标签： bootstrap-vue

【解决方案1】：

我最喜欢的方式是在字段选项中设置：

usersFields: [
  {
    key: 'id',
    label: 'ID',
    thClass: 'text-right',
    tdClass: 'text-right',
  },
  {
    key: 'status',
    label: 'Status',
    thClass: 'text-left',
    tdClass: 'text-left',
  },
]

【讨论】：

【解决方案2】：

-align-right 和 -align-left 类不是有效的 Bootstrap v4 CSS 类名称。 Bootstrap 文本对齐类是：

text-right
text-left
text-center

见https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment

【讨论】：