Laravel项目中Vue的b-pagination样式异常求助

问题背景 #

Laravel项目中原本正常的b-pagination组件突然样式错乱，表现为页码与上下箭头无法在同一行显示、布局错位。测试官方示例代码后问题依旧，推测是npm依赖更新或CSS样式冲突导致，需通过自定义样式修复（无法修改node_modules内代码）。

相关代码 #

Vue组件代码 #

<b-pagination
  v-model="currentPage"
  :total-rows="totalRows"
  :per-page="perPage"
  align="right"
  size="sm"
  class="my-0"
  @change="changeCurrentPage"
>
</b-pagination>

node_modules中_pagination.scss片段 #

// <pagination> and <pagination-nav> require the helper utility classes
@import "../../utilities";

$bv-pagination-classes-defined: false !default;

// Make sure to include these style definitions only once
@if $bv-pagination-classes-defined == false {
  $bv-pagination-classes-defined: true;

  // Pagination pill style
  .b-pagination-pills {
    .page-item {
      .page-link {
        border-radius: 50rem !important;
        margin-left: 0.25rem;
        line-height: 1;
      }

      &:first-child {
        .page-link {
          margin-left: 0;
        }
      }
    }
  }
}

现有自定义CSS #

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #009AA7;
  border-color: #009AA7;
}

.page-item.disabled .page-link {
  color: #74788d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #ced4da;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

样式异常截图 #

自定义修复方案 #

添加以下样式到Vue组件的<style>标签中（若使用scoped，需用深度选择器::v-deep或:deep()穿透作用域）：

/* 强制分页项在同一行水平排列 */
.b-pagination .page-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* 修复链接元素布局，确保内容不换行 */
.b-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* 适配sm尺寸的分页组件 */
.b-pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

修复逻辑 #

1. 用inline-flex确保分页项保持在同一行，同时垂直居中对齐
2. white-space: nowrap避免箭头或页码文本换行
3. 调整内边距和字体大小，适配size="sm"的组件尺寸，防止元素溢出换行

内容的提问来源于stack exchange，提问作者milica98