如何在 Bootstrap 4 中对齐分页？
Bootstrap 4 是一个广受欢迎的用于创建响应式、移动优先网站的前端编程框架。它提供了各种 CSS 和 JavaScript 元素，例如导航栏、表单、按钮、模式等，这些元素可能是用于快速构建具有现代、精美外观的网站。
Bootstrap 4 中的分页对齐是指网页分页组件的定位方式。分页通常是居中的，但是。 justify-content-* 类允许左对齐或右对齐。
方法
Bootstrap 4 中有多种可能的分页对齐方法 -
使用 .justify-content-* 类
使用 text-* 类
现在让我们通过示例详细了解每种方法。
方法 1：使用“.justify-content-* 类”
Bootstrap 4 中分页对齐的第一种方法是“使用 .justify-content-* 类”。
示例
在这里，我们将通过一个分步示例来实现此方法 -
第 1 步 - 确保 Bootstrap 4 的 JavaScript 和 CSS 文件包含在 HTML 文档的头部中。
步骤 2 - 要构建分页组件，请使用 pagination 类创建
- 元素。对于每个页面，在
- 元素。
步骤 3 - 您必须将以下类之一添加到
- 元素，以便将分页组件左对齐、居中或右对齐 -
分页组件使用 .justify-content-start 样式左对齐。
使用 justify-content-center 样式时分页组件居中。
align-pagination-end：将分页元素向右移动
- 元素。为每个 li 元素指定“page-item”类。
<li class="page-item">
登录后复制步骤 4 - 为每个
- 元素内的按钮或页码创建 元素。将类“page-link”赋予 元素。
<a class="page-link" href="#">1</a>
登录后复制第 5 步 - 最终代码如下所示 -
<div class="justify-content-center"> <ul class="pagination text-center"> <li class="page-item"> Previous <li class="page-item"> <a class="page-link" href="#">1</a> <li class="page-item"> 2 <li class="page-item"> 3 <li class="page-item"> Next登录后复制
第 4 步 - 这是分页左对齐时 HTML 代码的外观示例 -
<ul class="pagination justify-content-start"> <li class="page-item"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul>登录后复制第 5 步 - 添加所需的类后，分页组件应该按照您的预期对齐。
第 6 步 - 最终代码如下所示 -
<!DOCTYPE html> <html> <head> <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row justify-content-center"> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> </div> </body> </html>登录后复制方法 2：使用 text-* 类
要将分页组件分别向左、居中或向右对齐，请使用。文本左、文本中心和。文本右类。
示例
我们现在将看一下实施此方法的分步示例 -
第 1 步 - 创建一个容器 div 元素并为其指定类 justify-content-center。结果，分页将在容器内居中。
<div class="justify-content-center">
登录后复制步骤 2 - 在容器 div 中创建一个
- 元素，并为其指定类 pagination 和align-pagination-links-to-desired-side（例如 text-center、text-left、textright） ）
<ul class="pagination text-center">
登录后复制步骤 3 - 为
- 元素内的每个页码或上一个和下一个按钮创建
- 元素内添加一个带有类页面链接的 元素和一个带有类页面项的
结论
利用框架提供的内置类将使 Bootstrap 4 中的分页对齐变得简单。通过使用上述分步过程，您可以制作一个功能齐全且视觉上以页面为中心的分页组件。在项目中包含 Bootstrap CSS 和 JavaScript 文件，建立具有 aria-label 属性的 nav 元素，并提供包含分页链接的无序列表元素。 textcenter 类将执行此操作。通过这种策略，可以轻松更改分页的颜色和方向，而无需创建大量独特的 CSS。
以上是如何在 Bootstrap 4 中对齐分页？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践
Mar 08, 2025 am 09:45 AM
这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章，请查看“以：focus-visible的管理用户焦点”。在
将框阴影添加到WordPress块和元素
Mar 09, 2025 pm 12:53 PM
CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例，以及我们必须将这些样式应用于WordPress块和元素的选项。
使您的第一个自定义苗条过渡
Mar 15, 2025 am 11:08 AM
Svelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
