react-bootstrap <Row><Col lg='3'></Col></Row> 删除默认填充 - React JS

Question

在反应应用程序中，我想从每列的左侧和右侧删除填充。我猜这个 15px 的填充是由 react-bootstrap 提供给每一列的，因为我看到的是：

padding-right: 15px;
padding-left: 15px;

这是不可移动的（我试图这样做但失败了）。我在页面上的图片如下所示：

注意： 显示颜色 绿色 是从左侧和右侧应用到我要删除的每一列的填充。

我想要的页面图像输出如下所示：

我的代码：

.js 文件

import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
import { Images } from '../../../../Shared/Assets';
import ImagesIcon from '../../../../Components/Cells/ImagesIcon'

const ImgGallery = () => {
    return (
        <>
            <div className='ImgGalry'>
                <Row>
                    <Col lg='3'>
                        <ImagesIcon src={Images.xgallery4} />
                    </Col>
                    <Col lg='3'>
                        <ImagesIcon src={Images.xgallery2} />
                    </Col>
                    <Col lg='3'>
                        <ImagesIcon src={Images.xgallery1} />
                    </Col>
                    <Col lg='3'>
                        <ImagesIcon src={Images.xgallery2} />
                    </Col>
                </Row>
            </div>
        </>
    );
}
export default ImgGallery;

.scss 文件

.ImgGalry{
    overflow: hidden;
    background-color: #01FF56;
   img{
       width: 100% !important;
       height: 100% !important;
   }
}

总之，是否可以在使用 react-bootstrap 创建时删除或隐藏列的填充？谢谢。

Answer 1

将 px-0 类添加到 col

       <Row className="no-gutters">
            <Col lg='3' className="px-0">
                <ImagesIcon src={Images.xgallery4} />
            </Col>
            <Col lg='3' className="px-0">
                <ImagesIcon src={Images.xgallery2} />
            </Col>
            <Col lg='3' className="px-0">
                <ImagesIcon src={Images.xgallery1} />
            </Col>
            <Col lg='3' className="px-0">
                <ImagesIcon src={Images.xgallery2} />
            </Col>
        </Row>