时间戳

首页 > 解决方案 > 无法在模式页脚的 bootstrap-vue 列中居中选择列表和分页器

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

问题描述

我正在尝试在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变体和其他类选项，但我无法让这些项目让步。我需要做什么才能使项目在列中居中？

标签： cssvue.jsbootstrap-4bootstrap-modalfooter

解决方案

我认为问题在于ulin bootstrap-vue 分页有一个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>

推荐阅读