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：将分页元素向右移动
第 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 - 为
- 元素内的每个页码或上一个和下一个按钮创建
- 元素。为每个 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
- 元素内添加一个带有类页面链接的 元素和一个带有类页面项的
结论
利用框架提供的内置类将使 Bootstrap 4 中的分页对齐变得简单。通过使用上述分步过程，您可以制作一个功能齐全且视觉上以页面为中心的分页组件。在项目中包含 Bootstrap CSS 和 JavaScript 文件，建立具有 aria-label 属性的 nav 元素，并提供包含分页链接的无序列表元素。 textcenter 类将执行此操作。通过这种策略，可以轻松更改分页的颜色和方向，而无需创建大量独特的 CSS。
以上是如何在 Bootstrap 4 中对齐分页？的详细内容。更多信息请关注PHP中文网其他相关文章！
浏览器引擎多样性Apr 16, 2025 pm 12:02 PM当他们在2013年去Chrome时，我们失去了歌剧。与Edge今年早些时候也进行了同样的交易。迈克·泰勒（Mike Taylor）称这些变化为“减少
每周平台新闻：Apple部署网络组件，渐进的HTML渲染，自托管关键资源Apr 16, 2025 am 11:55 AM在本周的综述中，Apple进入Web组件，Instagram如何插入脚本以及一些思考的食物，以进行自托管关键资源。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
Atom编辑器mac版下载
最流行的的开源编辑器
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
禅工作室 13.0.1
功能强大的PHP集成开发环境
WebStorm Mac版
好用的JavaScript开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
