Html 为什么我的引导行向我的元素添加填充？

我正在尝试引导列系统，我正在尝试将文本居中，但它不起作用，因为它有一个可能来自引导行类的填充。这是我的代码

 <section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
        </section>

快速响应
快速响应
快速响应

这些自定义类名什么也没做，因为我的css仍然是空的，看起来是这样的

---

我能摆脱这种填充的唯一方法是删除

行

类，我不想这样做，我已经尝试过内联样式自定义类等，如何摆脱这种填充？

你是否尝试在css中编写“text align:center”（文本对齐：中心）逻辑上这不是引导网格的方式。我在这里看到的第一个问题是，您直接在

行中使用
行
。理想情况下，
行
后面应该紧跟一个
列
。如果您想引入新的网格行/列，您应该在该列中这样做。所以它应该是这样的：

<div class="row">
    <div class="col-12">
        <div class="row">
          <div class="col-6">
          </div>
          <div class="col-6">
          </div>
        </div>
    </div>
</div>

正如我提到的，立即嵌套行是非标准的。所显示的样式适用于作为行的子元素且与檐槽相关的图元。因此，通过按现有方式嵌套行，样式将应用于内部图元

根据标准实现，删除外部row类或在行之间放置一列。
然后您可以在css中编写，或者您可以编写“row{padding:0}”，如果您在css中编写，这对您来说可能没问题
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}> 
    <div className="text-a-img col-12">
        <div className="row">
            <div className="ti-title col-12 mt-4 text-center row">
                <h1>Fast response</h1>
            </div>
            <div className="ti-img col-12"></div>
            <div className="ti-text-col-12"></div>
        </div>
    </div>
</section>

<Container>
    <Row>
        <Col md={12}>
        </Col>
    </Row>
</Container>