我们可以在反应引导程序中将自定义 className 属性添加到“Col”或“Row”组件吗？

【问题标题】：Can we add custom className prop to "Col" or "Row" components in react bootstrap?我们可以在反应引导程序中将自定义 className 属性添加到“Col”或“Row”组件吗？
【发布时间】：2020-10-25 13:01:51
【问题描述】：

我为容器内的 Row 和 Col 组件提供了一个 className，那么为什么 padding 和 margin 属性在我的自定义类中不起作用？

我的反应代码-

<Container fluid id="about-title-container">
        <Row className="about-title-row-1">
        <Col className="about-title-row-1-col-1">
                <h1 className="about-title-h1">About Us</h1>
        </Col>
        </Row>
</Container>

我的 CSS 代码-

.about-title-row-1{
    padding: 4%;
    text-align: center;
}

.about-title-row-1-col-1{
    padding: 2%;
    text-align: center;
}

【问题讨论】：

如果我使用 id 作为道具而不是 className 效果很好

标签： css reactjs padding margin react-bootstrap

【解决方案1】：

因为Row 组件的默认左右边距为-15px，而Col 的默认左右边距为15px。要覆盖它，您可以在您的 css 中使用 !important ：

.about-title-row-1{
    padding: 4% !important;
    text-align: center;
}

.about-title-row-1-col-1{
    padding: 2% !important;
    text-align: center;
}

或在 Row 组件上使用 noGutters 属性来删除边距和填充，如下所示：

<Row noGutters></Row>

您也可以使用引导类进行填充和边距。

【讨论】：