如何在 Bootstrap 4 中对齐分页？

百变鹏仔 4个月前 (09-19) #CSS

文章标签分页

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 类创建

第 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 中创建一个

结论

利用框架提供的内置类将使 Bootstrap 4 中的分页对齐变得简单。通过使用上述分步过程，您可以制作一个功能齐全且视觉上以页面为中心的分页组件。在项目中包含 Bootstrap CSS 和 JavaScript 文件，建立具有 aria-label 属性的 nav 元素，并提供包含分页链接的无序列表元素。 textcenter 类将执行此操作。通过这种策略，可以轻松更改分页的颜色和方向，而无需创建大量独特的 CSS。

文章推荐

如何在 Bootstrap 4 中对齐分页？

方法

方法 1：使用“.justify-content-* 类”

示例

方法 2：使用 text-* 类

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写