如何在表格下将 Bootstrap Vue 分页居中？答案

【问题标题】：How to center Bootstrap Vue pagination under table?如何在表格下将 Bootstrap Vue 分页居中？
【发布时间】：2022-02-01 00:21:56
【问题描述】：

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

我怎样才能使分页水平居中？

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

【问题讨论】：

尝试将justify-content: center; 添加到您的.pagination 课程中
成功了！谢谢 - 你能把它作为答案，我会为你标记为正确的！干杯:-)
完成！谢谢约翰尼约翰男孩

标签： css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

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

【讨论】：