Row <Row><Col lg=‘3’></Col></Col>删除默认填充- remove

Question

在一个react应用程序中，我想从每一列的左边和右边移除填充。我猜这个15 as的填充是由react引导给每一列的，因为我看到的是：

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引导创建列时，是否有可能删除或隐藏列的填充？谢谢。

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>