如何在Bootstrap 4中通过CSS自定义分页组件的激活状态样式？-css教程-PHP中文网

bootstrap 4 中 .page-item.active .page-link 的默认样式定义在框架内置 css 中，背景色 #007bff、文字色 #fff、边框色 #007bff；覆盖时需确保选择器权重足够（如 .pagination .page-item.active .page-link），并置于 bootstrap css 之后加载。

如何在bootstrap 4中通过css自定义分页组件的激活状态样式？

激活状态的默认样式在哪定义

Bootstrap 4 中 .page-item.active .page-link 的默认样式由框架内置 CSS 控制，背景色是 #007bff，文字色是 #fff，边框也是 #007bff。直接覆盖它，比重写整个分页逻辑更稳妥。

关键点在于选择器权重：必须至少和 Bootstrap 原生一样强，否则会被忽略。推荐用 .pagination .page-item.active .page-link 或加 !important（仅当必要时）。

覆盖激活状态颜色的实操写法

在你的自定义 CSS 文件中（确保它在 Bootstrap CSS 之后加载），写：

.pagination .page-item.active .page-link {
  background-color: #ff6b35;
  border-color: #ff6b35;
  color: #fff;
}
<p>/<em> 可选：鼠标悬停时保持一致 </em>/
.pagination .page-item.active .page-link:hover {
background-color: #e05a2a;
border-color: #e05a2a;
}</p>

不要只写 .active .page-link —— 权重不够，容易被覆盖
避免用 !important 除非你发现样式始终不生效（比如用了 CDN 且无法控制加载顺序）
如果项目用了 Sass，更推荐在变量层修改 $pagination-active-bg 和 $pagination-active-border

禁用状态与激活状态共存时的常见冲突

当你同时设置 .disabled 和 .active（虽然语义上不合理，但 HTML 里可能误写），浏览器会按 CSS 优先级渲染，而 Bootstrap 的 .disabled 样式权重略低。结果可能是按钮看起来“既高亮又灰掉”，视觉混乱。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

检查并清理这类冗余类：

确保每个 <li> 最多只含 .active 或 .disabled 中的一个
服务端或 JS 动态生成分页 HTML 时，用逻辑互斥判断：if (isCurrent) { addClass('active') } else if (isDisabled) { addClass('disabled') }
注意 aria-current="page" 应只出现在 .active 元素上，否则影响可访问性

响应式下激活样式的意外失效

在小屏幕（sm 或更低）下，Bootstrap 4 会对 .pagination 添加 flex-wrap: wrap，某些自定义背景渐变或圆角可能因父容器尺寸压缩而变形或裁剪。

验证方式很简单：

打开浏览器 DevTools，切换到手机模拟模式，检查 .page-link 元素的实际宽高和 padding
如果圆角消失，可能是 border-radius 被重置了，显式补上：.pagination .page-item.active .page-link { border-radius: 8px; }
文字溢出？加 white-space: nowrap 并配合 font-size 微调

真正麻烦的不是写几行 CSS，而是改完后忘了在折叠状态下再测一遍——这个动作常被跳过。