无法在模式页脚的 bootstrap-vue 列中居中选择列表和分页器

Posted 2023-03-06

【中文标题】无法在模式页脚的 bootstrap-vue 列中居中选择列表和分页器

【英文标题】：Unable to center select list and paginator inside bootstrap-vue column in modal footer

【发布时间】：2021-04-06 12:02:07

【问题描述】：

我正在尝试对齐 bootstrap-vue modal 内的页脚范围插槽内的一些项目，但由于某种原因，无论我尝试什么，我都无法将我的内容放在一个列中以向右移动

          <template #modal-footer=" ok, cancel ">
              <div class="row w-100">
                  <div class="col-9 text-right border border-primary">
                    <b-form inline class="d-flex">
                      <b-form-select class="justify-content-end"
                          v-model="perPage"
                          :options="pagerSelectOptions"
                      >
                      </b-form-select>

                      <b-pagination
                          v-model="currentPage"
                          :total-rows="totalRows"
                          :per-page="perPage"
                          size="md"
                          hide-goto-end-buttons
                      ></b-pagination>
                    </b-form>
                  </div>
                  <div class="col-3 text-right border border-primary">
                      <b-button class="mr-4"
                          :disabled="restoreButtonDisabled"
                          dusk="deleted-pursuit-restore-ok-button"
                          variant="primary"
                          @click="restore"
                      >
                        <b-spinner
                            v-if="loading"
                            small
                            type="grow"
                        >
                        </b-spinner>
                         restoreButtonText  <b-badge
                            v-if="selectedPursuits.length > 0"
                            variant="outline-primary"
                        > selectedPursuits.length 
                          </b-badge>
                      </b-button>
                      <b-button
                          :disabled="loading"
                          @click="cancelModal"
                          dusk="deleted-pursuit-restore-cancel-button"
                      >
                        Cancel
                      </b-button>
                  </div>
              </div>
          </template>

这是它现在的样子（边框只是为了突出显示列）。

我想要的只是在左列中居中选择和页面。我已经尝试了每个justify 变体和其他类选项，但我无法让这些项目让步。我需要做什么才能使项目在列中居中？

【参考方案1】：

我认为问题在于 bootstrap-vue 分页中的 ul 有一个 margin 覆盖了以前的道具。您可以通过将分页 margin 设置为 0（即 m-0 引导方式）来解决此问题，并手动将边距/填充应用于其他元素以使其看起来不错。所以，是这样的：

<template #modal-footer=" ok, cancel ">
    <div class="row mx-2">
        <div class="col-9 text-right border border-primary d-flex justify-content-center py-2">
            <b-form inline>
                <b-form-select class="justify-content-end"
                               v-model="perPage"
                               :options="pagerSelectOptions"
                >
                </b-form-select>

                <b-pagination
                    class="m-0"
                    v-model="currentPage"
                    :total-rows="totalRows"
                    :per-page="perPage"
                    size="md"
                    hide-goto-end-buttons
                ></b-pagination>
            </b-form>
        </div>
        <div class="col-3 text-right border border-primary border-left-0 py-2">
            <b-button class=""
                      :disabled="restoreButtonDisabled"
                      dusk="deleted-pursuit-restore-ok-button"
                      variant="primary"
                      @click="restore"
            >
                <b-spinner
                    v-if="loading"
                    small
                    type="grow"
                >
                </b-spinner>
                 restoreButtonText 
                <b-badge
                    v-if="selectedPursuits.length > 0"
                    variant="outline-primary"
                > selectedPursuits.length 
                </b-badge>
            </b-button>
            <b-button
                :disabled="loading"
                @click="cancelModal"
                dusk="deleted-pursuit-restore-cancel-button"
            >
                Cancel
            </b-button>
        </div>
    </div>
</template>

【讨论】：

几乎完美。你把所有的东西都挤到了右边，但我所要做的就是将w-100 添加到行中，这是完美的。谢谢！。