如何在 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：将分页元素向右移动

  第 4 步- 这是分页左对齐时 HTML 代码的外观示例 -

   
   Previous 
   
   1 
   
   2 
   
   Next 
   

  登录后复制

  第 5 步- 添加所需的类后，分页组件应该按照您的预期对齐。

  第 6 步- 最终代码如下所示 -

  登录后复制

  方法 2：使用 text-* 类

  要将分页组件分别向左、居中或向右对齐，请使用。文本左、文本中心和。文本右类。

  示例

  我们现在将看一下实施此方法的分步示例 -

  第 1 步- 创建一个容器 div 元素并为其指定类 justify-content-center。结果，分页将在容器内居中。

  登录后复制

  步骤 2- 在容器 div 中创建一个

  元素，并为其指定类 pagination 和align-pagination-links-to-desired-side（例如 text-center、text-left、textright） ）

  登录后复制

  步骤 3- 为

  元素内的每个页码或上一个和下一个按钮创建
  • 元素。为每个 li 元素指定“page-item”类。

    登录后复制

    步骤 4- 为每个

  • 元素内的按钮或页码创建元素。将类“page-link”赋予元素。

    1

    登录后复制

    第 5 步- 最终代码如下所示 -

                      
                      
    
                       
    
                        
                       
                      
                      
    
                       
    
                        
                       
                      
     
     
    Previous

  • 1
  • 2
  • 3
  • Next