Html ReactStrap分页元素超出了可用宽度

我在Card元素中呈现了分页元素：

代码如下：

 <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
        <TablePagination
          pagesCount={this.props.pagesCount}
          currentPage={this.state.currentPage}
          handlePageClick={this.handlePageClick}
          handlePreviousClick={this.handlePreviousClick}
          handleNextClick={this.handleNextClick}
        />
      </Col>
    </Card>

这是TablePagination React功能组件：

import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

import PropTypes from "prop-types";
/** I used object destructuring of the props object, to pass down the properties as variables. This improves readability by getting rid of props. */
const TablePagination = ({
  pagesCount,
  currentPage,
  handlePageClick,
  handlePreviousClick,
  handleNextClick,
}) => {
  return (
    /**The reactstrap Pagination component encapsulates the reactstrap PaginationItem which in turn encapsulates reactstrap PaginationLink. */
    /**The first PaginationItem inside the Pagination is the previous button. This is disabled when the current page is zero or less
     *  than zero “disabled={currentPage <= 0}”. */
    <div>
      <Pagination size="sm">
        <PaginationItem disabled={currentPage <= 0}>
          <PaginationLink onClick={handlePreviousClick} previous href="#" />
        </PaginationItem>
        {/* The next PaginationItem after the previous PaginationItem button is the dynamic PaginationItem. This is the one that generates the page number buttons. */}
        {/* “Array(pagesCount)”: creates and initializes a new array object of length equal to pagesCount. */}
        {/* “[…Array(pagesCount)].map( fn)”: using the spread operator I expand the array. After expanding, the map() method then creates a new array of PaginationItems. */}

        {[...Array(pagesCount)].map((page, i) => (
          <PaginationItem active={i === currentPage} key={i}>
            <PaginationLink onClick={(e) => handlePageClick(e, i)} href="#">
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem disabled={currentPage >= pagesCount - 1}>
          <PaginationLink onClick={handleNextClick} next href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
};

TablePagination.propTypes = {
  //pageCount: the total number of records in our dataset.
  pagesCount: PropTypes.number.isRequired,
  //currentPage: the current page navigated to
  currentPage: PropTypes.number.isRequired,
  /**handlePageClick: a function that handles the click event when a page number is clicked.
   * This function will pass the current page number which will be saved in state. */
  handlePageClick: PropTypes.func.isRequired,
  /**handlePreviousClick: a function that handles the click event when the previous button is clicked. This enables navigating to the previous(<<) page. */
  handlePreviousClick: PropTypes.func.isRequired,
  /**handleNextClick: a function that handles the click event when the next (>>) button is clicked. This enables navigating to the next page. */
  handleNextClick: PropTypes.func.isRequired,
};
export default TablePagination;

import React，{Component}来自“React”；
从“reactstrap”导入{Pagination，PaginationItem，PaginationLink}；
从“道具类型”导入道具类型；
/**我使用props对象的对象分解，将属性作为变量传递。这通过去掉道具来提高可读性*/
常数表分页=({
寻呼机，
当前页，
HandlePage单击，
点击鼠标，
handleNextClick，
}) => {
返回(
/**reactstrap Pagination组件封装reactstrap PaginationItem，后者反过来封装reactstrap PaginationLink*/
/**分页中的第一个分页项是“上一页”按钮。当当前页面为零或更少时，此按钮将被禁用
*“大于零”已禁用={currentPage
{i+1}
))}
=页面搜索-1}>
);
};
TablePagination.propTypes={
//pageCount：数据集中记录的总数。
PageScont:PropTypes.number.isRequired，
//currentPage：导航到的当前页面
当前页面：需要PropTypes.number.isRequired，
/**handlePageClick：单击页码时处理单击事件的函数。
*此函数将传递当前页码，该页码将以状态保存*/
handlePageClick:PropTypes.func.isRequired，
/**handlePreviousClick：当单击“上一页”按钮时，处理单击事件的函数。此函数允许导航到单击的“上一页（）”按钮。此函数允许导航到下一页*/
handleNextClick:PropTypes.func.isRequired，
};
导出默认表格分页；

---

我在中进行了搜索，找不到一种方法使分页编号在下一行中呈现，以防它们超出宽度限制。

您可以为“.Pagination”元素添加样式规则

但是有几行看起来有点糟糕。

---

我认为最好在超出的页面上使用点，例如，

我也有同样的问题，我想让它更方便用户。 所以我想显示10个分页链接并动态更改起始和结束页面，就像谷歌页面结果分页一样

let pageLimit = 10; // number of page links in pagination
let start = 0; // starting page
let end = pageLimit; // ending page

if (pagesCount <= pageLimit) {
  pageLimit = pagesCount;
}

// increment start page when current page is greater than 5
if (currentPage - 5 >= 0) {
  start = currentPage - 4;
}

// if reaching end of pagination stop increment 
if (start + pageLimit >= pagesCount) {
  start = pagesCount - pageLimit;
}

// increment end page when current + 5 exceeds page limit
if (currentPage + 5 >= pageLimit) {
  end = currentPage + 6;
  pageLimit = end;
  if (pagesCount <= pageLimit) {
    pageLimit = pagesCount;
  }
}

let pageLimit=10；//分页中的页面链接数
让start=0；//起始页
let end=pageLimit；//结束页面
如果（PageScont=0）{
开始=当前第4页；
}
//如果达到分页结束停止增量
如果（开始+页面限制>=页面浏览）{
开始=页面浏览-页面限制；
}
//当前+5超出页面限制时增加结束页面
如果（当前页面+5>=页面限制）{
结束=当前页面+6；
页面限制=结束；
如果（第页）{
如果（i>=开始和&i<结束）{
返回(
handleClick（e，i）}href=“#”>
{i+1}
);
}
})}

谢谢你，你做到了！

let pageLimit = 10; // number of page links in pagination
let start = 0; // starting page
let end = pageLimit; // ending page

if (pagesCount <= pageLimit) {
  pageLimit = pagesCount;
}

// increment start page when current page is greater than 5
if (currentPage - 5 >= 0) {
  start = currentPage - 4;
}

// if reaching end of pagination stop increment 
if (start + pageLimit >= pagesCount) {
  start = pagesCount - pageLimit;
}

// increment end page when current + 5 exceeds page limit
if (currentPage + 5 >= pageLimit) {
  end = currentPage + 6;
  pageLimit = end;
  if (pagesCount <= pageLimit) {
    pageLimit = pagesCount;
  }
}

{[...Array(pageLimit)].map((page, i) => {
  if (i >= start && i < end) {
    return (
      <PaginationItem active={i === currentPage} key={i}>
        <PaginationLink onClick={e => handleClick(e, i)} href="#">
          {i + 1}
        </PaginationLink>
      </PaginationItem>
     );
  }
})}