这两天在做一个新的系统,从原有系统基础上进行修改,原来用的是Bootstrap2,现在升级到Bootstrap3,但是部分UI元素出现了不兼容的问题,比较麻烦的是分页这个功能:
配合的是Angular JS,原来的分页功能,现在还能用,功能正常,但页面显示混乱了,初步判断是CSS升级之后造成的。
以下是原来的分页代码:
<pagination
boundary-links="true"
on-select-page="search(page)"
num-pages="queryResult.noOfPages"
max-size="20"
rotate="false"
current-page="queryResult.currentPage"
class="pagination"
previous-text="'‹'"
next-text="'›'"
first-text="'«'"
last-text="'»'"
>
</pagination>
怎样让分页的页码正常显示呢?先后尝试了多种方法,都不行。也想过直接修改bootstrap.css这个文件,但并没有十足的把握,最终无法操作。
后来,在搜到StackOverflow上的一篇问答,基本确定了原因:
原来是Angular UI对Bootstrap 3 的支持并不是很好。不过这篇问答中给出的解决方法,我试了一下,也不行,我也不想去改什么Angular UI 了。
那这样就没办法做什么变通了。
怎么办呢?
仔细想想,bootstrap 2 更新到 bootstrap 3,应该也就是局部的修改,改动不可能很大,于是想到一个方法:
把bootstrap 3中分页部分的内容砍掉,换成bootstrap 2中的分页,行不行呢?
1. 先找到bootstrap 3中的分页:
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
//...略
3. 然后找到bootstrap 2中的分页部分(其实内容差不多),整体复制过来,
好了,分页部分的CSS替换好了,然后刷新页面,页码显示正常了!修改成功!
总结:CSS插件,遇到新版不兼容的问题,不一定要退回旧版,可以考虑直接修改新版不兼容的那部分代码,把它砍掉,换成旧版对应的内容!