提问人：Oliver 提问时间：11/17/2023 最后编辑：Carol SkellyOliver 更新时间：11/17/2023 访问量：30
在 React Bootstrap 5 中添加额外的网格大小
Add extra grid size in React Bootstrap 5
问：
是否可以添加额外的大小来反应引导程序？ 现在，引导程序大小如下：
WPW Container Max-Width
sx < 576px - none
sm > 567px - 540px
md > 768px - 720px
lg > 992px - 960px
xl > 1200px - 1140px
xxl > 1400px - 1320px
我想再添加一个，比如 XXL > 1580px - 1500px
我想添加这个，因为我想要一个最大宽度为 1500px 的容器，并且能够以在一行上容纳 5 列的方式划分行的列。
到目前为止，我将其添加到我的 CSS 中
@media (min-width: 1580px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1500px;
}
}
这只会让容器变大，不会调整列大小，如果我使用或我仍然得到 4 个项目/行。xxl={2}xxl={2.2}
答：
-1赞
Engr. Md. Muslim Uddin Arju
11/17/2023
#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;
评论
1赞
Oliver
11/17/2023
谢谢！这似乎有效，而且很简单。
2赞
Carol Skelly
11/17/2023
#2
如此处所述，没有办法获取 react-bootstrap 属性来识别额外的断点（即：xxxl={5})
但是，您可以使用 SASS 将额外的断点添加到 Bootstrap，然后将相应的 Bootstrap 类引用为 .row-cols-{breakpoint}-{size}className
https://codeply.com/p/z7Oqx8giVL
以下是使用 SASS 生成额外 xxxl 网格断点的方法。仅仅在CSS中添加容器大小的更改是不够的......
萨斯：
@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>
评论