Bootstrap分页默认横向，需通过CSS覆盖.pagination { flex-direction: column; }实现纵向，并确保样式优先级高于原生规则，同时注意焦点顺序、触摸热区和无障碍支持。
Bootstrap分页默认是横向的，怎么改成纵向？
Bootstrap 的 .pagination 类默认使用 display: flex + flex-direction: row，所以页码天然横排。要纵向排列，必须覆盖这个行为——不能只加个类，得改 CSS。
直接覆盖 flex-direction 的写法
在自定义样式中给分页容器（通常是 <nav> 或 <ul class="pagination">）加规则：
.pagination {
flex-direction: column;
}
注意：必须确保这条样式优先级高于 Bootstrap 原生 CSS（比如加 !important 或放在 Bootstrap 引入之后），否则会被覆盖。
- 如果用的是 Bootstrap 5+，原生 CSS 中
.pagination已带display: flex，所以只需改方向 - 如果用了
.pagination-lg或.pagination-sm，它们只改font-size和padding，不影响flex-direction，可继续叠加 - 纵向后，
.page-item会自动撑满宽度，但若想控制每项宽度，需额外设width或max-width
纵向分页下 justify-content 还管用吗？
管用，但语义变了：justify-content: center 会让每个 .page-item 在**垂直方向居中对齐自身内容**（即文字水平居中），而不是让整列页码居中；真正让整列居中，得靠父容器的文本对齐或 margin。
立即学习“前端免费学习笔记（深入）”；
- 让纵向分页整体水平居中：给
<nav>加text-align: center（对<a>有效）或margin: 0 auto（需设width） -
justify-content: end在纵向时会让每项文字右对齐，不是整列右偏移 - 别依赖
align-items想控制“整列位置”，它只作用于 flex 子项的交叉轴（此时是水平轴），和布局定位无关
键盘导航和无障碍支持会受影响吗？
不会破坏基础可访问性，但需手动检查两件事：
-
aria-current="page"仍要加在当前页<a>上，否则屏幕阅读器无法识别当前位置 - 纵向后 Tab 键仍按 DOM 顺序逐个聚焦，但视觉跳转更明显——如果用户依赖方向键导航（如某些 AT 工具），建议保持 DOM 顺序与视觉顺序一致（即不要用
order打乱） - 避免给
.page-link设过小的height或padding，iOS Safari 触摸热区可能不够，导致点击困难
事情说清了就结束。纵向分页最难的不是加一行 flex-direction，而是确保焦点顺序、触摸热区、屏幕阅读器反馈这三者没被隐式破坏。
