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

oknrviil  于 12个月前  发布在  React
关注(0)|答案(2)|浏览(104)

是否可以添加额外的大小来响应 Bootstrap ?现在 Bootstrap 的大小如下:

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

字符串
我想添加另一个像xxl > 1580 px-1500 px
我想添加这个,因为我想要一个最大宽度为1500 px的容器,并且能够以一种适合一行5列的方式划分行的列。
到目前为止,我把它添加到我的CSS

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


这只会使容器变大,不会调整col的大小,如果我使用xxl={2}xxl={2.2},我仍然会得到4个项目/行。

3yhwsihp

3yhwsihp1#

作为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

0g0grzrc

0g0grzrc2#

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

相关问题