作为explained here，没有办法获得react-bootstrap属性来识别额外的断点（即：xxxl={5}）
但是，您可以使用SASS向Bootstrap添加额外的断点，然后将适当的Bootstrap row-cols-{breakpoint}-{size}类引用为className。
https://codeply.com/p/z7Oqx8giVL的
下面是如何使用SASS生成额外的xxxl网格断点。仅仅在CSS中添加容器大小更改是不够的...

SASS：

@import "functions";
@import "variables";

$grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1300px,
  xxxl: 1500px
);

$container-max-widths: (
  xxs: 375px,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1300px,
  xxxl: 1500px
);

@import "bootstrap";

字符串

标记：

<Container className="App" fluid={true}>
        <Row className="row-cols-xxl-4 row-cols-xxxl-5">
            <Col>
              Col 1
            </Col>
            <Col>
              Col 1
            </Col>
            ...
        </Row>
      </Container>

型
Demo的

在Bootstrap 5中，网格系统基于flex容器和flex项。如果您想为额外的断点自定义网格系统，您可以为新断点创建自定义CSS类，并将其应用于特定元素。
下面是一个示例，说明如何为新断点创建自定义类，并将其与React Bootstrap一起使用：
CSS代码：

/* Custom breakpoint */
@media (min-width: 1580px) {
  .custom-container {
    max-width: 1500px;
  }

  .custom-col {
    flex: 0 0 20%; /* Adjust the width as needed for 5 columns */
  }
}

字符串
然后，在你的React组件中，你可以使用这个自定义类：

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import './YourCustomStyles.css'; // Import your custom styles

const YourComponent = () => {
  return (
    <Container className="custom-container">
      <Row>
        <Col className="custom-col">Column 1</Col>
        <Col className="custom-col">Column 2</Col>
        <Col className="custom-col">Column 3</Col>
        <Col className="custom-col">Column 4</Col>
        <Col className="custom-col">Column 5</Col>
      </Row>
    </Container>
  );
};

export default YourComponent;

型