如何在 bootstrap-vue 表中对齐列？

Question

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

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

如何正确？

Answer 1

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

• text-right
• text-left
• text-center

请参阅https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment

Answer 2

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

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