如何在 table 下居中 Bootstrap Vue 分页？

Question

我有一个 Bootstrap Vue table，下面有一个分页组件。我目前将它放在单列的单独行中，但虽然它看起来“相当”居中，但实际上并没有在列中居中，并且右侧 padding/margin 不均匀。看起来像是来自标签（每张图片）。

如何水平居中分页？

</b-table>

<b-row align-h="center" align-content="center">
  <b-col cols="3">

    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      aria-controls="my-table"
      
    ></b-pagination>

  </b-col>
</b-row>

Answer 1

尝试将 justify-content: center; 添加到您的 .pagination class

Answer 2

您可以使用 cols="auto" 而不是 cols="3"，这样列会根据内容自动调整自己的大小，而不是像现在那样使用特定的宽度。

https://bootstrap-vue.org/docs/components/layout#variable-width-content

<b-row align-h="center" align-content="center">
  <b-col cols="auto">
    <b-pagination></b-pagination>
  </b-col>
</b-row>

您也可以使用 Bootstraps Flex Utilities

<div class="d-flex justify-content-center">
  <b-pagination></b-pagination>
</div>

如何在 table 下居中 Bootstrap Vue 分页？

How to center Bootstrap Vue pagination under table?

css

vue.js

bootstrap-4

bootstrap-vue