首页 > 文章 > 前端

Bootstrap纵向分页怎么改flex-direction

时间：2026-05-21 15:15:32 452浏览收藏

Bootstrap分页默认横向排列，若需改为纵向布局，核心只需通过CSS覆盖`.pagination { flex-direction: column; }`，但关键在于确保样式优先级生效，并同步关注键盘导航顺序、触摸热区大小和屏幕阅读器支持等无障碍细节——真正考验的不是那行代码，而是纵向切换后对用户体验全链路的严谨保障。

怎样在Bootstrap中实现纵向排版的分页组件_修改CSS的flex-direction

Bootstrap分页默认是横向的，怎么改成纵向？

Bootstrap 的 .pagination 类默认使用 display: flex + flex-direction: row，所以页码天然横排。要纵向排列，必须覆盖这个行为——不能只加个类，得改 CSS。

直接覆盖 `flex-direction` 的写法

在自定义样式中给分页容器（通常是

或

.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