当我编译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));
}
}
}
1条答案
按热度按时间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)) {
在我自己的版本中交换行就解决了这个问题。现在只有第一个和最后一个链接被舍入