在 React Bootstrap 5 中添加额外的网格大小

Question

是否可以添加额外的大小来反应引导程序？ 现在引导程序大小如下：

      WPW    Container Max-Width
sx < 576px - none
sm > 567px - 540px
md > 768px - 720px
lg > 992px - 960px
xl > 1200px - 1140px
xxl > 1400px - 1320px

我想再添加一个，例如 特大号 > 1580 像素 - 1500 像素

我想添加这个，因为我想要一个最大宽度为 1500px 的容器，并且能够以适合一行 5 列的方式划分行的列。

到目前为止，我已将其添加到我的 CSS 中

@media (min-width: 1580px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1500px;
  }
}

这只会使容器更大，不会调整列大小，如果我使用

xxl={2}

或

xxl={2.2}

我仍然会得到 4 个项目/行。

Answer 1

在 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;

Answer 2

正如在这里解释的那样，没有办法让react-bootstrap属性来识别额外的断点（即：

xxxl={5}

）

但是，您可以使用 SASS 将额外的断点添加到 Bootstrap，然后将相应的 Bootstrap

row-cols-{breakpoint}-{size}

类引用为

className

。

https://codeply.com/p/z7Oqx8giVL

以下是如何生成额外的 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>

演示