编译的Bootstrap 5中分页的样式不一致

kpbwa7wx  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(153)

当我编译Bootstrap 5源代码时,我得到了这种分页风格:

但是当我通过CDN连接Bootstrap 5时,我得到了以下结果:

只在第一页和最后一页的链接中观察圆角。看起来border-radius mixin在编译 Bootstrap 的情况下不起作用。
如何才能获得文档中提到的样式?
下面是_pagination.scss中可能需要重写的代码:

.page-item {
  &:not(:first-child) .page-link {
    margin-left: $pagination-margin-start;
  }

  @if $pagination-margin-start == (calc($pagination-border-width * -1)) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
      }
    }

    &:last-child {
      .page-link {
        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
      }
    }
  } @else {
    // Add border-radius to all pageLinks in case they have left margin
    .page-link {
      @include border-radius(var(--#{$prefix}pagination-border-radius));
    }
  }
}
0lvr5msh

0lvr5msh1#

面临同样的问题
我发现CDN版本的**_pagination.scss**与scss源代码之间只有1处不同:
CDN版本(或www.example.com上的官方文档getbootstrap.com)
@if $pagination-margin-start == ($pagination-border-width * -1) {
原始版本
@if $pagination-margin-start == (calc($pagination-border-width * -1)) {
在我自己的版本中交换行就解决了这个问题。现在只有第一个和最后一个链接被舍入

相关问题